Flexbox-30天学会HTML＋CSS，制作精美网站

以前排版都会使用float、display属性的block、inline来制作，现在有了Flexbox，几乎可以解决各种排版需求。

Flexbox是什麽

flex 是Flexible Box的缩写，中文为弹性布局，是由 Flex Containers （父元素）和 Flex Items （子元素）他组成，依据单一 横向或垂直方向放置内容，可以解决过去复杂的版面配置问题，像是水平垂直置中。

弹性区块宣告

display: flex/inline-flex

• flex：区块层级，类似display:block
• inline-flex：行内层级，类似display:inline-block
  范例：分别将.box设置flex及inline-flex，文字的部分一个会换行，另一个不会

<div class="box">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
  </div>
  <span>text</span><div class="flex">
    <div class="box">
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
    </div>
    <span>display:flex</span>
  </div>
  <div class="inline-flex">
    <div class="box">
      <div class="item">item</div>
      <div class="item">item</div>
      <div class="item">item</div>
    </div>
    <span>display:inline-flex</span>
  </div>

.box{
  width: 350px;
  padding: 15px 10px;
  background-color: #dee2e8;
}
.item{
  width: 100%;
  padding: 15px;
  text-align: center;
  background-color: #bdc2ca;
  margin: 0 5px;
}
.flex .box{
  display: flex;
}
.inline-flex .box{
  display: inline-flex;
}

Flex Container

flex-direction

设定子元素排列方向，水平或是垂直

属性

• row：由左到右，由上到下，预设值
• row-reverse：与row相反
• column：由上到下，由左到右
• column-reverse：与column相反
  

flex-wrap

让子元素排成一行或多行，当子元素超过父元素宽度时是否要换行。

属性

• nowrap：单行，预设值
• wrap：多行
• wrap-reverse：单行，反转
  

flex-flow

是flex-direction及flex-wrap的简写

flex-flow: flex-direction flex-wrap

justify-content

水平对齐方式

属性

• flex-start：预设值，靠左对齐，从行头开始
• flex-end：靠右对齐，从行尾开始
• center：水平置中对齐
• space-between：平均分配内容，会对齐行头及行尾
• space-around：内容间距都会平均分配
  

align-items

垂直对齐方式

属性

• stretch：预设值，元素高度会填满容器高度
• flex-start：对齐父元素起始位置开始排列
• flex-end：对齐父元素终点位置开始排列
• center：垂直置中对齐
• baseline：内容的基线作为对齐线
  

align-content

与align-items相似，只是align-content是处理多行，但父元素设定flex-wrap:nowrap，变成一行时会无效

属性

• flex-start：对齐最上面的 cross start
• flex-end：对齐最下面的 cross end
• center：垂直置中
• stretch：元素高度会填满容器高度
• space-between：第一行与最後一行分别对齐最上方与最下方
• space-around：平均分配间距
  

Flex-item

order

可依照自己的规划，由小到大排出区块的顺序

<div class="box">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
    </div>

.box{
  display: flex;
  flex-wrap: wrap;
  width: 350px;
  padding: 15px 10px;
  background-color: #dee2e8;
  align-items: flex-start;
}
.item{
  width: 30px;
  padding: 15px;
  text-align: center;
  background-color: #bdc2ca;
  margin: 5px;
}
.item1{
  order:3;
}
.item2{
  order:1;
}
.item3{
  order:4;
}
.item4{
  order:2;
}

align-self

与align-items相同，用於覆写已经套用 align-items 的属性

范例：将2区块个别设定align-self:flex-end

flex-grow

依照比例分配剩余空间。

当区块物件小於容器宽度时会留白，为了不要留白个别让区块放大，预设为0，不会有弹性变化，不可为负值。

flex-grow:数值

<div class="box">
  <div class="item" style="background-color:red;"></div>
  <div class="item" style="background-color:green;"></div>
  <div class="item" style="background-color:blue;"></div>
</div>

宽度为350px，item宽度为100px，就会有多余的空间50px

.box .item{
  width: 100px;
}

将红色区块改为flex-grow: 1，就会将剩余空间的50px给红色区块

.box div:nth-of-type(1) {flex-grow: 1;}
.box div:nth-of-type(2) {flex-grow: 3;}
.box div:nth-of-type(3) {flex-grow: 2;}

flex-shrink

当区块物件大於容器宽度会超出范围，会个别区块做缩小，预设值为1，不可为负数，数值0不会有弹性变化。

flex-shrink:数值

<div class="box">
  <div class="item siderbar" style="background-color:red;"></div>
  <div class="item content" style="background-color:green;"></div>
</div>

.box宽度为100%，当容器宽度不够宽时，会缩小.content区块的宽度，.siderbar宽度都会是100px，直到宽度不足时，才会按比例缩放

.siderbar{
  flex-basis: 100px;
}
.content{
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 500px;
}

flex-basis

设定区块的大小，预设为auto，依据内容设置宽度，与width类似，但优先程度较高

flex-basis:数值/auto

<div class="box">
  <div style="background-color:red;"></div>
  <div style="background-color:green;"></div>
  <div style="background-color:blue;"></div>
</div>

.box {
  width: 350px;
  height: 100px;
  display: flex;
}
.box div{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50px;
}
.box div:nth-of-type(2) {
	flex-basis: 100px;
}

flex统一设定属性

flex: none flex-grow flex-shrink flex-basis

参考资料：
https://www.oxxostudio.tw/articles/201501/css-flexbox.html
https://blog.camel2243.com/2019/11/14/css-搞懂-flex-grow-flex-shirk-及-flex-basis-三种属性/