Flex布局常见属性及携程网首页案例源码

flex布局介绍

 操作方便，布局极为简单，移动端应用很广泛\n\n布局原理：flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。flex布局原理:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

常见属性

flex-direction属性

flex-direction：设置主轴的方向

(1)row(默认值):主轴为水平方向,自左至右

(2)row-reverse:主轴为水平方向,自右至左

(3)column:主轴为垂直方向,自上而下

(4)column-reverse:主轴为垂直方向,自下而上

justify-content属性

justify-content：设置主轴上子元素排列方式。

(1)flex-start（默认值）：左对齐

(2)flex-end：右对齐

(3)center：居中

(4)space-between：两端对齐，项目之间的间隔都相等

(5)space-around：两个项目两侧间隔相等

flex-wrap属性

flex-wrap：设置子元素是否允许换行。

默认是flex-wrap:no-wrap(不换行),当盒子放不下时也不会溢出,而是盒子伸缩。lex-wrap: wrap(换行)

align-items属性

align-items：设置侧轴上的子元素排列方式（单行）

（1）flex-start(默认值):从上而下

（2）flex-end:从下而上

（3）center：垂直居中

（4）stretch:拉伸

align-content属性

align-content：设置侧轴上的子元素的排列方式（多行）

flex属性

flex:分配父盒子剩余空间,这个属性是给子盒子设置的,后面的数字代表瓜分剩余空间的份数

携程网首页介绍及源码

部分源码

页面展示

源码获取

链接：https://pan.baidu.com/s/1lW9UKmiiLqPTFH77u3TwUQ?pwd=u0og 
提取码：u0og