CSS3弹性布局

前言

在我们用不同设备浏览网页的时候，我们可以发现：页面的内容的布局没有较大改变，有些元素甚至只是缩放了大小。那这些网页是怎么做到的呢？别担心，学会了今天的内容，你也可以写出一个这么“灵活”的网页。

css3弹性布局

弹性布局的作用是什么？

• 可以轻松的控制元素的排列、对齐和顺序的布局方式
• 现在终端类型的繁多，导致页面需要适应不同大小的屏幕和不同设备，使用弹性布局可确保元素保留恰当的行为的布局方式。

如何创建一个弹性盒子

声明定义

          父级盒子里面只需要加上一句："display:flex"

主轴和交叉轴

当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它

主轴

主轴由flex-direction来定义，用于规定主轴方向，取值有：

• row 从左到右水平排列元素（默认值）
• row-reverse 从右向左排列元素
• column从上到下垂直排列元素
• column-reverse从下到上垂直排列元素
  当取值为row或者是row-reverse时，主轴方向为水平延伸。
  为row时：
  为row-reverse时
  为column时
  为column-reverse时
  

交叉轴

交叉轴垂直于主轴，所以如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列方向向下的

如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。

flex-wrap

flex-wrap规定的弹性盒子里面的弹性元素是否可以换行
同时主轴方向决定了新行的堆叠方向
取值：
wrap 在必要时可以换行


nowrap （默认值） 不拆行或者拆列

wrap-reverse 在必要的时候换行，但是以相反方向开始堆叠。

flex-flow

flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式。
第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.
如：

.father {
    width: 700px;
    height: 400px;
    border: 5px solid silver;
    display: flex;
    flex-direction: row;
    flex-flow:row wrap;
     /* flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式。此处即为
     主轴从左至右，可换行 */
}

justify-content

justify-content 用于控制元素在主轴上的位置
取值：
flex-start 元素紧靠主轴起点

flex-end 元素紧靠主轴终点

center 元素从弹性容器中心开始

space-between 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间

space-around 每个元素两侧的间隔相等。所以，元素之间的间隔比元素与容器的边距的间隔大一倍

space-evenly 元素间距离平均分配

align-items

align-items 用于在交叉轴的排列方式
取值：
stretch 元素被拉伸以适应容器（默认值）
center 元素位于容器的中心
flex-start 元素位于容器的交叉轴开头
flex-end 元素位于容器的交叉轴结尾

！注意：
拉伸适应交叉轴
如果设置了 width | height | min-height | min-width |
max-width | max-height ，将影响stretch 的结果，
因为 stretch 优先级你于宽高设置。

align-content

stretch 将空间平均分配给元素
flex-start 元素紧靠交叉轴起点
flex-end 元素紧靠交叉轴终点
center 元素从弹性容器中心开始
space-between 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
space-around 每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly 元素间距离平均分配

flex-grow

	用于将弹性盒子的可用空间分配给弹性元素，可用使用整数或者小数
		1.将可用空间分成若干份 （若干份：是根据flex-grow后面填写数字的总和;）
		2.每个填写样式元素根据原始宽度+所占比例得出新的宽度

flex-shrink

在弹性盒子装不下时，定义的缩小数值

flex-basis

设置父级盒子宽度，优先于width

end

今天的学习就到这了，谢谢。