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