css flexbox 学习笔记（一）

客官°小女子只卖身不卖艺 2022-07-16 06:00 121阅读 0赞

#### flex布局又叫做弹性布局，任何一个容器都可以定义为flex布局，和以前的用盒模型实现的布局相比更加易用，灵活。 ####

.box{
        display:flex;
    }
    .box{
        display:inline-flex;
    }

**注：使用flex布局后，子元素的float,clear和vertical-align会失效**

#### 采用flex布局的元素，称为flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称”项目”。 ####

#### 容器的属性 ####

1.  flex-direction:决定项目排列的方向  
    a. row 水平,起点在左端  
    b. row-reverse 水平反转，起点在右端  
    c. column 垂直，起点在顶部  
    d. column-reverse 垂直反转，起点在底部  
    ![这里写图片描述][bg2015071005.png]
2.  flex-wrap:决定是否换行  
    a. warp:换行,第一行在上方  
    b. nowarp:不换行  
    c. warp-reverse:换行，第一行在下方  
    3.justify-content:定义项目在水平轴的对其方式  
    a. flex-start:左对齐  
    b. flex-end:右对齐  
    c. center:居中  
    d. space-between:两端对齐  
    e. space-around:每个项目两端距离相等  
    ![这里写图片描述][bg2015071010.png]  
    4.align-items:垂直方向的对其方式  
    a. flex-start:顶部对齐  
    b. flex-end: 底部对齐  
    c. center:垂直居中  
    d. baseline:项目第一行文本对齐  
    e. stretch:如果项目未设置高度，将沾满整个容器高度  
    ![这里写图片描述][bg2015071011.png]  
    5.align-content:多根轴线的对齐方式，如果只有一根则不起作用，就是在容器中有多行的情况。  
    a. flex-start:顶部对齐  
    b. flex-end:底部对齐、  
    c. center:居中  
    d. space-between:上下两端对齐  
    e. space-around:每一行两端距离相等  
    ![这里写图片描述][bg2015071012.png]
3.  flex-flow:是flex-direction属性和flex-wrap属性的简写形式

#### 项目的属性 ####

1.  order:项目排列顺序，数值越小越靠前
2.  flex-grow:项目的放大比例，默认为0，即使有剩余空间也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。  
    ![这里写图片描述][bg2015071014.png]
3.  flex-shrink:项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。  
    ![这里写图片描述][bg2015071015.jpg]
4.  flex-basis:项目的宽度属性，默认为自动。可设置为定值
5.  align-self:项目的对其方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
6.  flex:flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。

#### 有了flex布局，去实现垂直居中，宽度自适应等一系列布局就会十分容易。 ####

原文链接：[阮一峰flex布局教程][flex]

[bg2015071005.png]: http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071005.png
[bg2015071010.png]: http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071010.png
[bg2015071011.png]: http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071011.png
[bg2015071012.png]: http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071012.png
[bg2015071014.png]: http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071014.png
[bg2015071015.jpg]: http://www.ruanyifeng.com/blogimg/asset/2015/bg2015071015.jpg
[flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html