Flex布局简介
**
Flex布局
**
一、什么是Flex布局?
Flexible Box的缩写,意为“弹性布局”,它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。目前,它已经得到了所有
浏览器的支持,这意味着,现在就能很安全地使用这项功能。
二、Flex概念
想要使用Flex布局必须先给元素添加属性定义为弹性盒。采用了Flex布局的元素称为“容器”,它的所有子元素称为“项目”。
各类型的元素都可以定义为Flex布局,如块级元素,
/*块级元素*/
div{
display:flex;
}
展示效果如下,
行级元素也可以定义为Flex布局
div{
display:inline-flex;
}
展示效果如下,
当使用 flex 布局时,首先想到的是两根轴线 ——主轴和交叉轴。主轴由 flex-direction 定义,另一根轴垂直于它。我们使用
flexbox的所有属性都跟这两根轴线有关。
注:1.当元素设置为display:flex时,默认x轴为主轴,其子元素在主轴排列。
2.当元素设置为display:flex时,其子元素都能设置宽高。
3.当元素设置为display:flex时,其子元素的float和clear无效。
4.当元素设置为display:flex时,其子元素的vertical-align(元素垂直对齐方式)无效。
三、容器Flex属性
1.flex-direction
2.flex-wrap
3.flex-flow
4.justify-content
5.align-items
6.align-content
3.1 flex-direction
flex-direction 决定主轴的方向
div{
flex-direction:row | row-reverse | column | column-reverse;
}
row:水平方向为主轴,起点在左侧
row-reverse:水平方向为主轴,起点在右侧
column:主轴为垂直方向,起点在顶部
column-reverse:主轴为垂直方向,起点在底部
3.2 flex-warp
flex-warp 决定子元素是否换行
div{
flex-warp:nowarp | warp | warp-reverse;
}
nowarp(默认值):不换行
warp:换行
warp-reverse:反向换行
3.3 justify-content
jusify-content 子元素在主轴上的对齐方式
div{
justify-content:flex-start | flex-end | center | space-around | space-between;
}
flex-start:子元素位于主轴起始位置
flex-end:子元素位于主轴终点位置
center:子元素主轴居中
space-around:子元素自动分配间距
space-between:子元素两端对齐,中间自动分配间距
3.4 align-items
align-items 子元素在侧轴上的对齐方式
div{
display:flex-start | flex-end | center | baseline | stretch;
}
flex-start:子元素位于侧轴起始位置
flex-end:子元素位置侧轴终点位置
center:子元素侧轴居中
baseline:子元素基线对齐
stretch:子元素默认位置对齐
3.5 align-content
align-content 多行元素在侧轴上的对齐方式(多行元素才有效)
div{
align-content:flex-start | flex-end | center | space-around | space-between | stretch;
}
flex-start:子元素位于侧轴起始位置
flex-end:子元素位于侧轴终点位置
center:子元素位于侧轴居中
space-around:子元素自动分配间距
space-between:子元素两段对齐,中间自动分配间距
stretch:子元素默认位置对齐
3.6 flex-flow
flex-flow是flex-direction和flex-warp的缩写,默认值为row nowarp。
div{
flex-flow:<flex-direction><flex-warp>;
}
四、项目Flex属性
4.1 align-self
align-self 控制单个子元素在侧轴上的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性;若没有父元素,则等同于stretch
div{
align-self:flex-start | flex-end | center | auto | stretch;
}
4.2 order属性
order 定义项目的排列顺序,数值越小,排列越靠前,默认为0。
div2{
order:4;
}
4.3 flex-grow
flex-grow 定义项目的放大比例,默认为0
div{
flex-grow:1;
}
4.4 flex-shrink
flex-shrink 定义项目的缩小比例,默认为1
div{
flex-shrink:0;
}
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。
4.5 flex-basis
flex-basis 定义分配多于空间之前,项目占据的主轴空间,默认值为auto
div{
flex:<length> | auto;
}
4.6 flex
flex 是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto
div{
flex:none|<flex-grow> | <flex-shrink> | <flex-basis>;
}
上一篇: 33.MySQL中的视图
下一篇: 也谈字节跳动的爬虫
推荐阅读
-
Flex布局简介
-
cookie简介
-
Flex Sprite 双击事件 失效的解决办法 博客分类: Flex spritedoubleclickenabledmouseevent
-
Flex chart 改变图表元素的颜色 博客分类: Flex flexchartlengend颜色自定义
-
认识iReport并创建其模板 博客分类: iRport报表 ireport设计器使用简介
-
Grails 2.0的Resources插件简介 博客分类: grails grails
-
Groovy 简介 博客分类: Grails&Groovy
-
Vue前端项目-主页布局-01
-
Eclipse开发经典教程:SWT布局(2) 博客分类: Java Eclipse单元测试
-
Keep-Alive简介及在Tomcat中配置 博客分类: apahcejbossjava基础