小课堂【萌新】

flex弹性布局

分享人：段俊超

1.背景介绍

2.知识解析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

1.背景介绍

1.背景介绍 常用的WEB布局有哪些？ 1.静态布局 2.弹性布局 3.流式布局 4.自适应布局 5.响应式布局

FLEX布局是什么？

2009年，W3C提出了一种新的布局方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。 目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
使用flex布局的容器（flex container），它内部的元素自动成为flex项目（flex item）。容器拥有两根隐形的轴，水平的主轴（main axis），和竖直的交叉轴。 主轴开始的位置，即主轴与右边框的交点，称为main start；主轴结束的位置称为main end；交叉轴开始的位置称为cross start； 交叉轴结束的位置称为cross end。item按主轴或交叉轴排列，item在主轴方向上占据的宽度称为main size，在交叉轴方向上占据的宽度称为cross size。

2.知识解析

一，怎么运用FLEX布局

flex布局非常灵活，任一容器都可以指定为flex布局。块状只需要display属性规定为flex即可。 行内元素也可以指定为flex布局，将display属性设置为inline-flex。 还有WebKit内核的浏览器需要加上-webkit前缀。 需要注意的是设置成为flex布局之后，子元素的float，clear，vertical-align就会失效。

二，基本概念

采用flex布局的元素就被称为flex容器（flex contain），它的所有子元素称为flex项目（flex item）。 容器默认存在两根轴线，一根主轴（main axis）一根交叉轴（cross axis）。 项目默认沿主轴排列，单个项目占据的主轴空间叫main size，占据的交叉轴空间叫cross size。

三. FLEX-BOX容器属性

flex-box(容器)和flex-item(项目)各自都有不同的属性。通过对它们进行不同的设置来对整体布局进行调整以达到想要的效果。

四、容器属性详述

　 　1.flex-direction 　　　　

决定主轴的方向，即项目排列的方向，有四个可能的值：row(默认)|row-reverse|column|column-reverse

　　　　

row:主轴为水平方向，项目沿主轴从左至右排列

　　　　

column：主轴为竖直方向，项目沿主轴从上至下排列

　

row-reverse：主轴水平，项目从右至左排列，与row反向

　　　　

column-reverse：主轴竖直，项目从下至上排列，与column反向

1.flex-wrap

　　　

默认情况下，item排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式，可能的值nowrap(默认)|wrap|wrap-reverse

　　　　

nowrap：自动缩小项目，不换行

　　　　

wrap：换行，且第一行在上方

　　　　

wrap-reverse：换行，第一行在下面

2、flex-flow

　　　　

是flex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列 不换行。

3、justify-content

　　　决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around。当主轴沿水平方向时，具体含义为 　　　　　

flex-start：左对齐

　　　　　　

flex-end：右对齐

center：居中对齐

　　　　　　

space- between：两端对齐

　　　　　　

space-around：沿轴线均匀分布

4、align-items

　　

决定了item在交叉轴上的对齐方式，可能的值有flex-start|flex-end|center|baseline|stretch，当主轴水平时，其具体含义为

　　　　

flex-start：顶端对齐

　　　　

flex-end：底部对齐

center：竖直方向上居中对齐

　　　　

baseline：item第一行文字的底部对齐

　　　　

stretch：当item未设置高度时，item将和容器等高对齐

5、align-content

　　

该属性定义了当有多根主轴时，即item不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属性将失效。align-content可能值含义如下（假设主轴为水平方向）：

　　　　　　

flex-start：左对齐

　　　　　　

flex-end：右对齐

　

center：居中对齐

　

space- between：两端对齐

　　　　　　

space-around：沿轴线均匀分布

　　　　　　

stretch：各行将根据其flex-grow值伸展以充分占据剩的空间

五、flex item属性详述
item的属性在item的style中设置。item共有如下六种属性
　

1、order

　　　　

order的值是整数，默认为0，整数越小，item排列越靠前，

　

2、flex-grow

　　　　

定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例，

　

3、flex-shrink

　　　　

定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例。flex-grow

4、flex-basis

　　　　

表示项目在主轴上占据的空间，默认值为auto。

　

5、flex

　　　　

flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。

　

6、align-self

　　　　

align-self属性允许item有自己独特的在交叉轴上的对齐方式，它有六个可能的值。默认值为auto

　　　　　

　auto：和父元素align-self的值一致

　　　　　

　flex-start：顶端对齐

flex-end：底部对齐

　　　　　　

center：竖直方向上居中对齐

　　　　　　

baseline：item第一行文字的底部对齐

　　　　　　

stretch：当item未设置高度时，item将和容器等高对齐

3.常见问题

1.display:flex可以复合使用吗？

2.flex缺点？

4.解决方案

1. 可以的，一个元素可以是一个display的子元素同时也是另外一个display的父元素。

2.后期维护不易，删改其中项目可能会影响整体布局。

5.编码实战

鸣谢

感谢大家观看

By 段俊超