CSS_弹性布局（flex）

文章目录

• 一、什么是弹性布局
• 二、弹性布局的属性

---

一、什么是弹性布局

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

弹性布局用于提高盒子模型的灵活度，可以在任意电脑网页保持一样的比例
（个人感觉比float方便太多了）
注意：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
Webkit 内核的浏览器，必须加上-webkit前缀。行内元素当然也可以使用flex布局

二、弹性布局的属性

1.flex-direction（控制方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：从左往右
row-reverse：从右往左
column：从上到下
column-reverse：从下到上

2.justify-content(控制主轴对齐方式)

.box{
    justify-content：flex-start(默认值)|flex-end|center|space-between|
    |space-evenly|space-around;
}

flex-start(默认值):与main start对齐
flex-end：与main end对齐
center：居中
space-between：flex items 之间的距离相等，与main start、main end两端对齐
space-evenly: flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离
space-around :flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离的一半

3.align-items(控制侧轴对齐方式)

.box{
    align-items：normal|stretch|flex-satrt|flex-end|
    |center|baseline;
}

normal：在弹性布局中，效果和stretch一样
stretch：前提是items不设置高度，当flex items 在cross axis 方向的size为auto时，会自动拉伸至填充flex container(或者换句话说：如果项目未设置高度或设为auto，将占满整个容器的高度。)
flex-satrt:与cross start 对齐
flex-end:与cross end 对齐
center:居中对齐
baseline:与基准线对齐

4.flex-wrap（决定是单行还是多行）

.box{
    flex-wrap：nowrap|warp|wrap-reverse;
}

nowrap(默认)：单行
warp：多行
wrap-reverse:多行（对比wrap，cross start 与cross end相反）

5. align-content（与justify-content类似）

6.flex-flow （是flex-direction与flex-wrap的简写）

合并使用上述两个的属性值，例如：flex-flow: row wrap;（水平排列，多行显示）

---

flex 项目属性（item属性）

7.order（控制排布顺序）

可以设置为任意整数（正整数、负整数、0），值越小越排在前面
默认值为0

8.align-self(效果与align-items一致)

9.flex（控制大小，缩放 ）

flex 是flex-grow || flex-shink||flex-basis的简写
默认值为 0 1 auto
注意：
该属性的默认值为 0 1 auto（注意顺序），后两个属性可选
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
如果需要这三个属性的时候，建议使用flex，而不是单独的三个分离的属性，因为浏览 器会推算相关值

---