【flex布局】携程页面制作笔记

学习资料来源：

bilibili CSS3-flex布局

flex 属性

flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

1. flex-flow (flex-direction + flex-wrap):main axis方向 是否多行
   • nowrap
   • wrap
2. justify-content :主轴排列方式：
3. align-items（单行使用）:cross axis 排列方式
4. align-content(多行使用) ：cross axis 排列方式
   • flex-start
   • flex-end
   • center
   • space-around
   • space-between
   • stretch (子元素的height 不可以有，在cross axis方向上拉伸)
5. 子元素属性：
   • flex ：分配剩余的空间，比如：子元素三等分，可以子元素不设置高宽，仅仅flex:1 ;
   • order :子元素相对顺序，默认1 ，升序

携程页面制作