移动web开发之flex布局

01.flex布局体验

1.1传统布局与flex布局

1.2初体验

02.flex布局原理

2.1布局原理

03.flex布局父项常见属性

3.1常见父项属性

3.2 flex-direction设置主轴的方向

3.3 justify-content 设置主轴上的子元素排列方式





3.4 flex-wrap设置子元素是否换行



3.5 align-items设置侧轴上的子元素排列方式(单行)



3.6 align-content 设置侧轴上的子元素的排列方式(多行)

3.7 align-items和align-content区别

3.8 flex-flow

04. flex布局子项常见属性

4.1 flex属性




4.2 align-self控制子项自己在侧轴上的排列方式

4.3 order属性定义项目的排列顺序

案例:携程网首页案列制作