CSS Flex 布局


是什么


Flexible Box
缩写
弹性布局
声明

.box { display: flex }
行块
.box { display: inline-flex }


基本概念

Flex 容器
定义
Flex 布局元素

主轴(水平)
main start(开始)
main end(结束)
交叉轴(垂直)
cross start(开始)
cross end(结束)
Flex 项目
定义
Flex 布局
子元素
默认

main size(主轴)
cross size(交叉轴)


容器属性

flex-direction(主轴方向)
row
row-reverse
column
column-reverse
flex-wrap(换行方式)
nowrap
wrap
wrap-reverse
flex-flow(简写)
justify-content(主轴对齐)
flex-start
flex-end
flex-end
space-between
space-around
align-items(交叉轴对齐)
flex-start
flex-end
center
baseline
stretch
align-content(多轴对齐)
flex-start
flex-end
center
space-between
space-around
stretch


项目属性

order(排列顺序)
flex-grow(放大比例)
flex-shrink(缩小比例)
flex-basis(占据空间)
默认值
auto
举例
300px
500px
flex(简写)
align-self
auto
flex-start
flex-end
center
baseline
stretch

本站所发布的教程和软件源于互联网搬运,仅限于小范围内传播学习,请在下载后24小时内删除

如果有侵权之处请第一时间联系我们删除。敬请谅解!861013016@qq.com


极客猿小兵 » CSS Flex布局教程

发表评论