12 CSS3Flex布局

1、简介

Flex 是 Flexible Box（弹性盒子）的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。可改进容器中的项⽬对⻬，⽅向和顺序，即使他们具有动态甚⾄是未知⼤⼩。Flex容器能够调节⼦节点的宽度或⾼度，以便适应不同的屏幕尺⼨。任何一个容器都可以指定为 Flex 布局。

弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

2、基本概念

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

容器存在两根轴：⽔平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴开始的位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。单
个项⽬占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

3、用法

使⽤flex布局，需在⽗元素上设置display属性

div {
  display: flex;
}

行内元素也可以使用 Flex 布局。

span {
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上 -webkit 前缀。

div {
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设置flex布局后，⼦元素的float、clear和vertical-align属性将失效。

4、flex布局容器六大属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

5、css3 flex弹性布局-项⽬属性（子元素属性）

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self