flex布局

最新推荐文章于 2024-11-16 17:16:31 发布

转载最新推荐文章于 2024-11-16 17:16:31 发布 · 322 阅读

本文深入讲解Flex布局的核心概念，包括flex-grow、flex-shrink、flex-basis的默认值及使用，展示如何通过display:flex实现弹性盒子布局。文章还介绍了justify-content和align-items属性在水平和垂直居中的应用，以及flex-direction、flex-wrap和flex-flow属性对项目排列的影响。

flex :flex-grow(拉伸) flex-shrink(压缩) flex-basis(基准值)
分别是 :默认 1 1 auto
basis可以取0% 或者(xx)px

display:flex/inline-flex

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

使用 flex 布局首先要设置父容器 display: flex，
然后再设置 justify-content: center 实现水平居中，
最后设置 align-items: center 实现垂直居中。

lex-direction 即项目的排列方向
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap
nowrap :不换行
wrap :换行，第一行在下方。
wrap-reverse:换行，第一行在上方
flex-flow
-???
justify-content 在主轴上的对齐方式。
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔都相等。
space-around; 有间隔的对齐,栅栏,每个项目两侧的间隔相等。
align-items 同上,只是在y轴上
flex-start/flex-end/center/
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
baseline: 项目的第一行文字的基线对齐。
align-content