flex布局

flex布局

当有三个子div时

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;">蓝色</div>  
  <div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>

未设置布局时

未设置布局时

display: flex;

设置了弹性布局后

display: flex;

flex-wrap

flex-wrap: wrap;

让弹性盒子里的元素在必要的时候拆行或者拆列（比如一行挤不下会换行）

flex-wrap: wrap;

flex-wrap: nowrap;

不拆行或不拆列。

flex-wrap: nowrap;

flex-wrap: wrap-reverse;

拆行或拆列，但是以相反的顺序。

批注 2021-07-18 172401.jpg

flex

flex:0; 不允许项目压缩、放大

flex:none;

flex:1; 项目自动充满剩余空间

flex:1;

flex:auto

和原本设置了弹性布局一样

flex:auto

flex-direction

flex-direction: column;

垂直排列显示

flex-direction

flex-direction: row;

水平排列显示

flex-direction: row;

justify-content

justify-content: flex-start;

位于容器的开头， 居左

justify-content: flex-start;

justify-content: flex-end;

位于容器的结尾， 居右

justify-content: flex-end;

justify-content: center;

位于容器的中心。

justify-content: center;

justify-content: space-between;

各行之间留有空白。

justify-content: space-between;

justify-content: space-around;

各行之前、之间、之后都留有空白

justify-content: space-around;

align-items

定义flex子项在flex容器的当前行的侧轴（纵轴）（水平）方向上的对齐方式。

align-items: stretch;

默认值，上下拉伸内容

align-items: stretch;

align-items: center;

元素位于容器的中心。

align-items: center;

align-items: flex-start;

元素位于容器的顶部。

align-items: flex-start;

align-items: flex-end;

元素位于容器的底部。

align-items: flex-end;

align-items: baseline;

元素位于容器的基线上。（项目的第一行文字的基线对齐。）

align-items: baseline;

align-content

弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

align-content: stretch;

默认值

align-content: stretch;

align-content: center;

元素位于容器的中心。

align-content: center;

align-content: flex-start;

元素位于容器的顶部。

align-content: flex-start;

align-content: flex-end;

元素位于容器的底部。

align-content: flex-end;

align-content: space-between;

各行之间留有空白。

align-content: space-between;

align-content: space-around;

各行之前、之间、之后都留有空白

align-content: space-around;

参考 菜鸟教程
https://www.runoob.com/cssref/css3-pr-flex.html
详细介绍
https://www.runoob.com/w3cnote/flex-grammar.html