本文详细介绍了Flex布局，包括其基本概念、主轴与交叉轴的定义，以及容器的六种布局属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content。通过这些属性，可以灵活控制项目的排列方向、换行方式、对齐方式等，实现更复杂的网页布局。
1什么是flex布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
、采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴。
首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。
块元素布局：flex；
行内元素布局：inline-flex
当设置flex布局后，子元素的float，vertical-align,clear将会失效。
2容器上可以布局的六种属性。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2.1flex-direction决定主轴的方向，既项目的排列方向。
默认属性值：row既从左向右排列
最低0.47元/天 解锁文章
扫一扫
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
