CSS Flexbox(灵活盒子)
-
CSS Flexbox布局模块
在Flexbox布局模块之前,有四种布局模式:- 块(block),用于网页中的部分
- 内联(inline),用于文本
- 表(table),用于二维表数据
- 定位(position),用于元素的显式位置
-
浏览器支持
属性 Internet Explorer Chrome FireFox Safari Opera 属性格式 flexbox 11.0 29.0 22.0 10.0 48.0 -
-
父元素(容器)
通过将display属性设置为flex,Flex容器变得灵活:- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
-
-
-
flex-flow属性
flex-flow属性是用于设置flex-direction和flex-wrap属性的简写属性。 -
-
-
-
完美居中
在下面的例子中,我们将解决一个非常常见的样式问题:完美居中。 解决方案:将justify-content和align-items属性设置为居中,flex项目将完美居中: -
子元素(item)
Flex容器的直接子元素自动变为(flex)项。 flex项属性有:- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
-
order属性
order属性指定flex item的顺序。 代码中的第一个flex项不必显示为布局中的第一个项。order值必须是数字,默认值为0。 -
flex-grow属性
flex-grow属性指定弹性项目相对于其他弹性项目的增长量。 该值必须是数字,默认值为0。 -
flex-shrink属性
flex-shrink属性指定Flex项目相对于其他Flex项目收缩的程度。 -
flex-basis属性
flex-basis属性指定弹性项的初始长度。 -
flex属性
flex属性是flex-grow,flex-shrink和flex-basis属性的速记属性。 -
-
flex应用场景
使用Flex Box制作响应式网站和图库非常方便 -
CSS Flexbox属性
下表列出了flexbox使用的CSS属性:属性 描述 display 指定用于HTML元素的框的类型 flex-direction 指定flex容器中可伸缩项目的方向 justify-content 当项目不使用主轴上的所有可用空间时,水平对齐flex项目 align-items 当项目不使用横轴上的所有可用空间时,垂直对齐flex项目 flex-wrap 指定是否应该包装flex项(如果在一行上没有足够的空间容纳它们) align-content 修改flex-wrap属性的行为。它类似于对齐项,但是它不是对齐flex项,而是对齐flex行 flex-flow flex-direction和flex-wrap的简写属性 order 指定一个flex项相对于同一容器内其他flex项的顺序 align-self 用于flex项目。覆盖容器的align-items属性 flex flex-growth、flex-shrink和flex-base属性的简写属性