flex布局快速上手 css3flex

极速上手

文章图片


flex-direction	整体方向，横着还是竖着。默认横着左上角
flex-wrap	flex-direction横着太多，需要换行吗？
align-items	单轴横着一排顶上，顶下还是横排文字矫正
align-content	多轴顶上还是顶下
justify-content	帮`flex-direction`决定聚合还是平铺
justify-items	用了也没用，他是grid网格布局用的
flex-flow	组合的`flex-direction`和`flex-wrap`

【flex布局快速上手】

文章图片


order	-1 0 1 决定了你单独的li谁往前谁往后
flex-grow	所有`.a > li`批量用它，自适应一行。只用一个那就一行自适应
flex-basis	其实就是li最小宽度
flex-shrink	缩小比例
flex	`flex-grow`, `flex-shrink` 和 `flex-basis`简写
align-self	相当于单独版的`align-items`

实战
与其挨个讲不如直接实战，每个东西怎么玩
1.导航左右各一个

文章图片

新建查询更多.a { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 10px; }

2.输入框
默认样式！问题是
(1)输入框和按钮靠不近
(2)宽度不能100%

文章图片

第一步：所有左靠齐

文章图片

第二步：填充一行

文章图片

第三步：自选上中下还是自适应填充

文章图片

商城排列
其实就是横竖横三个一分。

文章图片

文章图片文章图片文章图片文章图片 .a{ width: 615px; margin: 0 auto; display: flex; justify-content: space-around; } .b{ display: flex; flex-direction: column; justify-content: inherit; } .c{ display: flex; flex-direction: row; justify-content: space-between; }