弹性布局
1.弹性布局简介
弹性布局，⼜称为“flex布局”，是W3C于2009年推出的⼀种布局⽅式，可以简单、快速、响应式的实现各种布局页⾯，取⽽代之的是“position+display+float”，现在已经得到了所有主流浏览器的⽀持。
了解两个基本概念：
①  容器： 需要添加弹性布局的⽗元素；
②  项⽬： 弹性布局容器中的每⼀个⼦元素，称为项⽬；
了解两个基本⽅向：
①  主轴： 在弹性布局中，我们会通过属性规定⽔平/垂直⽅向为主轴；
②  交叉轴： 与主轴垂直的另⼀⽅向，称为交叉轴。
2.弹性布局的使⽤
① 给⽗容器添加display: flex/inline-flex；属性，即可使容器内容采⽤弹性布局显⽰，⽽不遵循常规⽂档流的显⽰⽅式；
② 容器添加弹性布局后，仅仅是容器内容（项⽬）采⽤弹性布局，⽽容器⾃⾝在⽂档流中的定位⽅式依然遵循常规⽂档流；
flex布局详细讲解③ display:flex; 容器添加弹性布局后，显⽰为块级元素；
display:inline-flex; 容器添加弹性布局后，显⽰为⾏级元素；
④ 设为 Flex布局后，⼦元素的float、clear和vertical-align属性将失效。但是position属性，依然⽣效。
3.display: flex；使⽤的12⼤属性。其中，12个属性分为两类，6个作⽤于⽗容器，6个作⽤于⼦项⽬。
4.作⽤于⽗容器的6⼤属性
①flex-direction属性决定主轴的⽅向（即项⽬的排列⽅向）
row（默认值）： 主轴为⽔平⽅向，起点在左端；
row-reverse： 主轴在⽔平⽅向，起点在右端 ；
column：主轴为垂直⽅向，起点在上沿。
column-reverse：主轴为垂直⽅向，起点在下沿。
⽰例1：
⽰例2：
⽰例3：
⽰例4：
② flex-wrap属性定义，如果⼀条轴线排不下，如何换⾏。
nowrap（默认）：不换⾏。当容器宽度不够时，每个项⽬会被挤压宽度；            wrap： 换⾏，并且第⼀⾏在容器最上⽅；
wrap-reverse： 换⾏，并且第⼀⾏在容器最下⽅。
⽰例1：
⽰例2：
⽰例3：
③flex-flow 是flex-direction和flex-wrap的缩写形式，默认值为：flex-flow: row wrap;
可以结合上⾯的例⼦进⾏理解
⽰例1:
⽰例2：
④justify-content属性定义了项⽬在主轴上的对齐⽅式。
>>> 此属性与主轴⽅向息息相关。
主轴⽅向为：row-起点在左边，row-reverse-起点在右边， column-起点在上边，column-reverse-起点在下边
flex-start（默认值）： 项⽬位于主轴起点。
flex-end：项⽬位于主轴终点。
center： 居中
space-between：两端对齐，项⽬之间的间隔都相等。(开头和最后的项⽬，与⽗容器边缘没有间隔)
space-around：每个项⽬两侧的间隔相等。所以，项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍。(开头和最后的项⽬，与⽗容器边缘有⼀定的间隔)
⽰例1：
⽰例2：
⽰例3：
⽰例4：
⽰例5：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。