弹性布局(flex布局)

2018-04-20  本文已影响37人  婷小厨

参考阮一峰的文章:

语法:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

玲珑骰子案例:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

1.任何一个盒子:.box{display:flex;},不止块级元素,行内元素也可以用flex.

2.注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

3.采用了flex布局的元素,称为flex容器。所有子元素自动成为容器成员(flex item)

4.主轴(main axis):main start,main end

   侧轴(cross axis):corss start, corss end

   容器成员(flex item ):main size,cross size(子元素的宽和高)

5.父容器的属性(6个属性)

flex-direction (切换主轴方向)

flex-wrap(控制子元素换行)

flex-flow(以上两个的综合写法,方向和是否换行)

justify-content(主轴 左中右)

align-items(侧轴 上中下)

align-content (多根轴线的时候)

父容器:

父:display:flex; 这个一设完,块级元素也会默认排成从左到右的一行。

父:flex-direction:row | row-reverse | column | column-reverse

默认主轴为水平方向时:

flex-direction:row; 控制子元素,贴着左边向右排列,左墙壁1,2,3

flex-direction:row-reverse;控制子元素,贴着右边向左排列,3,2,1右墙壁

flex-direction:column: 控制子元素,垂直方向,从左上开始 1,2,3

flex-direction:column-reverse;控制子元素,垂直方向,从左下开始,1在最下面

控制子元素换行的问题:

flex-wrap:nowrap | wrap | wrap-reverse;

父:flex-wrap:nowrap; 不换行

        flex-wrap:wrap;换行,第一行在上面

        flex-wrap:wrap-reverse;换行,排不下的第二行在上面

综合写法:flex-flow:<flex-direction> ||<flex-wrap>;

父:flex-flow:<flex-direction> ||<flex-wrap>;

子元素在主轴方向上的对齐方式:

父:justify-content:flex-start  如水平为主轴,则是贴左边,左边为start, 左1,2,3,

                        flex-end    贴右边,1,2,3右墙

                        center   居中

                        space-between 两端各贴左右边框,项目之间的间隔相等。

                        space-around 左右也不贴边框,类似于各个子盒子都有左右margin

子元素在侧轴方向上的对齐方式:

父:align-items:flex-start  贴上框  (侧轴的起点对齐)

                          flex-end  贴下框   (侧轴的终点对齐)

                          center 垂直方向,中间

                          baseline: 项目的第一行文字的基线对齐。

                          stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

如有多根轴线,如何定义对齐方式:

父:align-content:flex-start | flex-end | center | space-between | space-around | stretch;


子元素的一些属性:

子:

order(子盒子顺序)

flex-shrink

flex-grow

flex-basis

flex

align-self (子元素自己的对齐方式,与align-item一样)

子:order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。负数比0靠前。

子:flex-shrink:0,(默认1)

则比如说压缩浏览器窗口的时候,所有项目的flex-shrink属性都为1,就单独一个设置为0。则0的这位还是保持原来大小,其他被压缩。

子:flex-grow:0,(默认0)与上面的相反,如有多余空间会等分,然后放大自己。设了0就不会变化。

子:flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。

子:flex:  flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

子:align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。属性值和slign-items一样。

上一篇 下一篇

猜你喜欢

热点阅读