CSS浮动布局放弃float，拥抱flex（详解）
CSS 浮动布局放弃float，拥抱flex（详解）
博客说明
⽂章所涉及的资料来⾃互联⽹整理和个⼈总结，意在于个⼈学习和经验汇总，如有什么地⽅侵权，请联系本⼈删除，谢谢！
说明
在写前端代码的时候，写⼀排的float:left, float: right，最后再来个clear:both；有的时候⼀旦忘记清除浮动，那么页⾯就糊了。
就是吃了float的亏，代码写得多，还容易吃亏。所以⽬光旁移⼀下，看到了flex。
Flex布局
Flex 称为弹性布局，它为盒状模型提供了最⼤的灵活性。任何⼀个容器都可以指定为 Flex 布局。使⽤了flex的元素，称为flex容器。⾥⾯的⼦元素被称为项⽬，项⽬的float、clear和vertical-align属性将失效。
/
/ Flex 布局
.box{
display: flex;
}
// ⾏内元素使⽤ Flex 布局
.box{
display: inline-flex;
}
// Webkit 内核的浏览器，必须加上`-webkit`前缀
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
容器和项⽬
既然分为了容器和项⽬，那么⼤致就是如下的关系，主要记录⼀下容器属性和项⽬属性。
容器属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction属性
决定主轴的⽅向（即项⽬的排列⽅向）
取值：row(默认) | row-reverse | column | column-reverse
row（默认值）：主轴为⽔平⽅向，起点在左端。
row-reverse：主轴为⽔平⽅向，起点在右端。
column：主轴为垂直⽅向，起点在上沿。
column-reverse：主轴为垂直⽅向，起点在下沿。
.
box {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap属性
控制项⽬是否换⾏
取值：nowrap(默认) | wrap | wrap-reverse
nowrap（默认值）：不换⾏，等分容器。
wrap：换⾏，项⽬不会等分容器宽度，⽽是根据⾃⾝宽度进⾏排列，如果超出⽗容器宽度则⾃然换⾏。
wrap-reverse：与wrap效果相反。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-flow属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
justify-content属性
控制项⽬在横轴的对齐⽅式
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
flex-start（默认值）：左对齐。
center：居中。
flex-end：右对齐。
space-between：左右两端对齐，即左右两侧项⽬都紧贴容器，且项⽬之间间距相等。
space-around：项⽬之间间距为左右两侧项⽬到容器间距的2倍。
space-evenly：为项⽬之间间距与项⽬与容器间距相等。
.
box {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
align-items属性
控制项⽬在纵轴排列⽅式
取值：flex-start | flex-end | center | baseline | stretch(默认)
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项⽬的第⼀⾏⽂字的基线对齐。
stretch（默认值）：如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
align-content属性
控制多⾏项⽬的对齐⽅式，如果项⽬只有⼀⾏则不会起作⽤
取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
菜鸟教程flex布局space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔⽐轴线与边框的间隔⼤⼀倍。
stretch（默认值）：轴线占满整个交叉轴。
space-evenly：为项⽬之间间距与项⽬与容器间距相等。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch | space-evenly;
}
项⽬属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order属性
属性定义项⽬的排列顺序。数值越⼩，排列越靠前，默认为0。
.
item {
order: <integer>;
}
flex-grow属性
性定义项⽬的放⼤⽐例，默认为0，即如果存在剩余空间，也不放⼤。
.item {
flex-grow: <number>; /* default 0 */
}
flex-shrink属性
flex-shrink属性定义了项⽬的缩⼩⽐例，默认为1，即如果空间不⾜，该项⽬将缩⼩。flex-shrink属性为0时，其他项⽬都为1，则空间不⾜时，flex-shrink不缩⼩。
.item {
flex-shrink: <number>; /* default 1 */
}
flex-basis属性
默认auto时，项⽬会保持默认宽度，或者以width为⾃⾝的宽度
如果设置了flex-basis会覆盖widtn属性。
.item {
flex-basis: <length> | auto; /* default auto */
}
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
align-self属性
align-self属性允许单个项⽬有与其他项⽬不⼀样的对齐⽅式，可覆盖align-items属性。默认值为auto，表⽰继承⽗元素的align-items属性，如果没有⽗元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
感谢
万能的⽹络
菜鸟教程
阮⼀峰的flex布局
以及勤劳的⾃⼰，，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。