Day11:Flex布局
参考： 来源：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
网页布局是css的一个重点。
盒子模型
display属性
position属性
float属性W3C提出了一种新的方案—-Flex布局
弹性布局 任何一个容器都可以指定为Flex布局
.box{
display: flex;
}行内元素也可以使用Flex布局
.box{
display: inline-flex;
}.box{
display: -webkit-flex; /* Safari */
display: flex;
}设为Flex布局 子元素的float、clear和vertical-align属性
image
image.png
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-contentflex-direction属性决定主轴的方向
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
image
image.png
flex-wrap属性 默认情况下，项目都排在一条线 如果一条轴线排不下，就换行
image
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}nowrap（默认）：不换行
image
wrap：换行，第一行在上方
image
wrap-reverse：换行，第一行在下方
image
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式
默认值为row nowrap
.box {
flex-flow: <flex-direction> <flex-wrap>;
}justify-content属性定义了项目在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
image
image.png
align-items属性定义项目在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
image
image.png
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
image
image.png
order
flex-grow
flex-shrink
flex-basis
flex
align-selforder属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
.item {
order: <integer>;
}
image
flex-grow属性定义项目的放大比例 默认为0，即如果存在剩余空间，也不放大
.item {
flex-grow: <number>; /* default 0 */
}
image
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
.item {
flex-shrink: <number>; /* default 1 */
}
image
image.png
image.png
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.07.03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读