30天打造品牌特色电商网站 Day.22 图片排版实作

分享完关於图片的排版设计，今天我们就来进行排版的实作啦！

之前有介绍过的<float><inline-block>其实都是常见用来排版的方式，<float>相对於<inline-block>在浏览器方面有较高的支援度，但在使用时要注意清除浮动，才不会影响到後续的排版，这个之前没有提醒过，这里简单用个范例介绍一下：

.clearfix::after { /＊建立伪元素 放在容器後面＊/
  content: "";
  clear: both; /＊清除浮动＊/
  display: table;
}

这样下一个元素就不会跟着左右浮动啦！如果有遇到类似的问题，大家可以去试试看喔～

那我们今天主要是介绍<flexbox>的排版方式！

首先是设定的部分，利用<display>标签把容器设置为flex属性。

.flexbox {
  display: flex;
}

接下来介绍几种flexbox常用的属性，在排版时可以弹性的去做搭配使用

• <flex-direction> 定义容器想要堆叠内部元素的方向

.flexbox{
    flex-direction:row;
    /＊水平堆叠项目 从左到右＊/
}
.flexbox{
    flex-direction:column;
    /＊垂直堆叠项目 从上到下＊/
}
.flexbox{
    flex-direction:row-reverse;
   /＊水平堆叠项目 从右到左＊/
}
.flexbox{
    flex-direction:column-reverse;
   /＊垂直堆叠项目 从下到上＊/
}

• <flex-wrap>指定容器内的元素是否要换行

.flexbox {
  display: flex;
  flex-wrap: nowrap;/＊元素不换行（预设）＊/
}
.flexbox {
  display: flex;
  flex-wrap: wrap; /＊元素换行＊/
}

• <justify-content>可以影响元素的水平对齐

.flexbox {
  display: flex;
  justify-content: flex-start;/＊对齐容器开头的项目＊/
}
.flexbox {
  display: flex;
  justify-content: flex-end; /＊对齐容器结尾的项目＊/
}
.flexbox {
  display: flex;
  justify-content: center;  /＊对齐到容器的中心＊/
}
.flexbox {
  display: flex;
  justify-content: space-around;  /＊平均分配间距＊/
}
.flexbox {
  display: flex;
  justify-content: space-between;  /＊平均分配间距，左右元素会贴齐边界＊/
}

• <align-items>可以影响元素的垂直对齐

.flexbox {
  display: flex;
  align-items: flex-start;/＊对齐容器上方＊/
}
.flexbox {
  display: flex;
  align-items: flex-end; /＊对齐容器下方＊/
}
.flexbox {
  display: flex;
  align-items: center;  /＊对齐到容器的垂直中心＊/
}
.flexbox {
  display: flex;
  align-items:stretch;;  /＊把内部元素全部撑开到Flexbox的高度＊/
}
.flexbox {
  display: flex;
  align-items:baseline;  /＊以内部元素的基线作为对齐标准＊/
}

以上就是<flexbox>简单的介绍，其实<flexbox>还有很多特别的属性可以做使用，这个属性让我们在做排版可以更加弹性，熟悉的话在排版时非常好用喔！推荐大家可以多多练习，那我们图片排版的主题就到今天结束了～希望大家可以收获多多