flex布局基本用法

flexBox

flexBox布局方式

flexBox布局方式是一维布局方式,按行或按列排布元素,它解决了对齐、分布和响应式的问题

开启flex布局

开启flex布局只需要在外层设置

display:flex;

即可开启flex布局模式，它的子元素会按行排列(按照主轴排列)

主轴和交叉轴

flex容器含有一个水平方向的主轴和一个垂直方向的交叉轴

容器子元素会按照主轴和交叉轴的起始位置开始排列，即容器的左上角

改变主轴方向排列

改变主轴方向排列使用justify-content属性

靠右对齐

justify-content:flex-end;

居中对齐

justify-content:center;

平分空间

justify-content:space-evenly;

两端对其

justify-content:space-between;

改变交叉轴方向排列

改变主轴方向排列使用align-items属性

靠下对齐

align-items:flex-end;

居中对齐

align-items:center;

改变模式

改变为列模式只需要设置父容器

flex-direction:column;
此时主轴变为交叉轴，交叉轴变为主轴，其他设置项和行模式一样

子元素flex属性

子元素可以设置flex属性来分配空间占比

例如三个子元素分别为flex:1,flex:2,flex:1,则第二个元素占二分之一，一三两个元素平分剩下空间

父容器flex-wrap属性

flex-wrap是指会不会分行的意思，默认是nowrap，当子元素排列大小超过父容器大小，并不会分行，而是平分子元素大小，仍然挤在一行
例如

html

<div class="container">
    <div class="item one"></div>
    <div class="item two"></div>
    <div class="item three"></div>
    <div class="item four"></div>
    <div class="item five"></div>
</div>

css

.container {
    display: flex;
    background-color: beige;
    width: 400px;
    height: 100px;
}

.item {
    width: 100px;
    height: 60px;
    border-radius: 6px;
}
.one{background-color: red}
.two{background-color: greenyellow}
.three{background-color: aquamarine}
.four{background-color: aqua}
.five{background-color: darkorange}

效果

可以看到100*5>400,所以实际上每个方块都被压缩了宽度

在父容器中加入

flex-wrap:wrap;

效果

可以看到超出部分直接换行。如果父容器设置了高度，父容器高度不会被撑开，如果没有设置则会直接撑开父容器高度

父容器flex-flow属性

flex-flow属性是flex-direction和flex-wrap属性组合起来的缩写,例如

flex-flow:column wrap;

父容器align-content属性

align-content是用来调整当父容器wrap多余一行之后，行与行之间的对其方式

子元素order属性

order属性用于调整子元素排列顺序，默认为0，给元素设定好order后，小的会排在大的前面，比如将一个子元素设定order位1，其余默认，则这个子元素会排到最后面，设定为-1，则会排到最前面

子元素align-self属性

align-self是用于覆写父容器的align-items设定的，可以设定为flex-start,flex-end,center等，会覆盖掉父元素的设定

子元素flex-basis属性

flex-basis是设定子元素的主轴方向的大小的

例如:

父容器的flex-direction为row,设定子元素flex-basis后，子元素的宽度width会失效，转而是由flex-basis设定的大小来取代原有宽度;

父容器的flex-direction为column,设定子元素flex-basis后，子元素的高度height会失效，转而是由flex-basis设定的大小来取代原有高度;

flex-basis设置为0，则等同于width/height是0的效果，只要容器本身没有overflow:hidden的设定，则大小就取决于内容的大小

flex-basis设置为auto，则按照容器本身的大小计算,也就是取决于容器的width/height

子元素flex-grow属性

flex-grow是指当父容器主轴方向有剩余空间的时候,子元素沿主轴方向扩大的设定。
和子元素的flex属性类似，当主轴有剩余大小时候，设定子元素的flex-grow为0，则保持原有大小不变

假如有三个元素，分别设定flex-grow为0，1，2，则第一个元素保持不变，第二个元素向主轴方向扩大主轴方向剩余空间的1/3大小,第三个元素扩大2/3大小

子元素flex-shrink属性

flex-shrink和flex-grow相反,是指当子元素沿主轴方向大小的总和，超过了父容器的大小的时候，子元素沿主轴方向怎样缩小，用法同flex-grow类似

再看子元素的flex属性

子元素的flex属性其实是flex-grow,flex-shrink,flex-basis组合起来的缩写

例如:

设定子元素

flex:1 1 auto;
即是flex-grow:1,flex-shrink:1,flex-basis:auto

子元素会按照父容器的大小，平均分配空间去扩大或缩小，父容器有剩余空间是同步扩大，父容器没有剩余空间则同步缩小，

假如改为

flex:1 1 150px;

即每一个子元素宽度最多是150px;

假如改为

flex:0 0 150px;

即每一个子元素大小固定为150px,不会扩大也不会缩小