css弹性布局 display:flex;

这是我的第一篇掘金博客，开启掘金写作之路。

弹性布局 flex

0. flex容器：采用flex布局的元素（父元素

1. flex项目：元素下的所有子元素（子元素

2. 轴

   • 主轴：水平向右

   • 交叉轴：垂直向下

   • display:flex;所有项目默认在一排（若项目宽高超过容器，则会等比例压缩项目

     

注意：

0. 设置之后，子元素的float 、clear 、vartical-align 将会失效

flex-wrap 属性

• flex-wrap:nowrap;不换行（默认

• flex-wrap:wrap; 换行

  

• flex-wrap:wrap-reverse; 倒叙换行

  

justify-content属性（水平对齐）

• justify-content:flex-start; 左边对齐（默认

• justify-content:flex-end; 右端对齐

  

• justify-content:center; 居中对齐

  

• justify-content:space-between; 水平两边紧挨容器的对齐

  

• justify-content:space-around; 水平中项目与容器的距离是项目与项目距离的一半

• justify-content:space-evenly; 水平所有距离相等的对齐

align-items 属性（垂直对齐）

• align-items:flex-start; 头对齐

  

• align-items:flex-end; 尾对齐

  

• align-items:center; 垂直居中对齐

  

• align-items:stretch; （默认）如果项目未设置高度或设为auto，将占满整个容器的高度。

• align-items:baseline; 每个项目内第一行文字的基线对齐

flex-grow

项目分配扩展比率 （瓜分空白部分

• 写在项目里面

值	描述
number	一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。

#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}
​
/*      每个div平均分配
#main div {flex-grow: 1;}
*/
​
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}        //是其他项目的三倍
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
​

flex-direction

改变主轴的方向

值	描述
row	水平：左向右 （默认
row-reverse	水平：右向左
column	垂直：上to下
column-reverse	垂直：下to上

flex-flow:;

组合direction和wrap flex-flow:flex-direction flex-wrap;