深入浅析CSS3中的Flex布局整理
副标题[/!--empirenews.page--]
Flexbox布局模块旨在提供一个更有效的方式,在一个容器里面去布局分配空间。即使容器的大小是未知的,或者动态变化的。 Flex 布局背后的主要思想是让容器能够改变其项目的宽度 / 高度(和顺序) ,以最佳地填充可用空间(主要是适应各种显示设备和屏幕大小)。 Flex 容器扩展项以填充可用的空闲空间或缩小它们以防止溢出。 最重要的是,flexbox 布局与常规布局(基于垂直方向的块布局和基于水平方向的内联布局)相比,具有方向不可知性。 虽然这些对于页面来说工作得很好,但是它们缺乏灵活性来支持大型或复杂的应用程序(特别是在方向改变、调整大小、拉伸、缩小等方面)。 原理 由于 flexbox 是一个完整的模块,而不是一个单独的属性,它涉及到很多东西,包括它的整个属性集。 其中一些被设置在容器上(父元素,称为“ flex container”) ,而另一些被设置在子元素上(称为“ flex item”)。如果“常规”布局基于块流方向和内联流方向,那么 flex 布局基于“ flex-flow 方向”。 请看一下规范中的这个图,解释一下 flex 布局背后的主要思想。 项目将按照主轴(main-axis,从main start到main end)或交叉轴(从cross start到cross end)进行布局。 main-axis:主轴线,伸缩容器的主轴线是伸缩项目布局的主轴线。 注意,它不一定是水平的; 它取决于 flex-direction 属性 main-start, main-end:从 main-start 开始,到 main-end,flex 项目被放置在容器中 main-size:主尺寸,一个伸缩项目的宽度或高度,以主尺寸为准,是该项目的主尺寸。 Flex 项的主尺寸属性是“ width”或“ height”,以主尺寸中的值为准 cross axis:交叉轴,与主轴垂直的轴称为交叉轴。它的方向取决于主轴的方向 cross-start | cross-end:弹性线充满了项目,并放置到容器从cross-start延续到cross-end。 cross-size:flex item的宽度或高度,以交叉尺寸中的哪一个为准,就是项目的cross size。 cross size属性是交叉尺寸中的“width”或“height”中的任何一个。 父级属性(flex container) 1. flex-direction flex-direction决定了主轴方向即flex item排列方向,除了默认的row方向之外,还可以纵向、反向(row-reverse/column-reverse)排列flex item .container { flex-direction: row | row-reverse | column | column-reverse; } css: .flex-container { display: flex; flex-direction: row; } 效果:
2. flex-wrap 如果我们不想在窗口变窄的情况下压缩flex item,而是让超出边界的flex item换行显示那我们可以设置flex container的flex-wrap .container{ flex-wrap: nowrap | wrap | wrap-reverse; } css: .flex-container { display: flex; flex-wrap: wrap; } 效果:在页面不断变小的时候,就会换行
3. flex-flow flex-direction和flex-wrap可以合并为一个属性flex-flow,比如: flex-flow: row-reverse wrap 4. justify content 这定义了沿主轴的对齐方式。 当一行中的所有 flex项都不灵活,或者灵活但已经达到其最大大小时,它有助于分配额外的剩余可用空间。 当项目溢出线的时候,它也对项目的排列有一定的控制作用。 .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right } css: .flex-container { display: flex; justify-content: center; } 效果:
5. align-items 实现了flex方向的居中后,垂直于主轴方向的居中可以用align-items实现。 .container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end } css: .flex-container { display: flex; align-items: center; } 效果:
6. align-content 多行的情况下,将在内部对齐一个 flex 容器的线,类似于调整内容对齐主轴中单个项的方式。 如果flex只有一行,就不会起作用。 .container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline }
子类属性(flex item) 1. order 默认情况下,flex 项按源顺序排列。 但是,order 属性控制它们在 flex 容器中出现的顺序。 css: .one { order: 3 } .two { order: 1 } .three { order: 2 } 效果:
2. flex-grow (编辑:上饶站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |