二 属性:
容器的 6 大属性:
1 flex-direction 项目的排列方向
flex-direction: row;(默认值) 主轴为水平方向, 从右往左.
row-reverse; 主轴为水平方向, 从左往右.
column; 主轴为垂直方向, 从上往下.
column-reverse; 主轴为垂直方向, 从下往上.
2 flex-wrap 是否换行
flex-wrap: no-wrap(默认): 不换行.
wrap : 换行.
wrap-reverse : 换行, 从下往上换行.
3 flex-flow flex-direction 属性和 flex-wrap 属性的简写形式.
flex-flow : row nowrap (默认值)
4 justify-content 项目 item 在水平上的对齐方式.
justify-content: flex-start; 往右边对齐
flex-end; 往左边对齐
center; 往中间对齐
space-between; 两边对齐, 项目之间的间隔都相等.
space-around; 每个项目两侧的间隔相等. 所以, 项目之间的间隔比项目与边框的间隔大一倍.
5 align-items 项目 item 在垂直上的对齐方式.
align-items: flex-start; 往上对齐.
flex-end; 往下对齐.
center; 往中间对齐.
baseline; 项目的第一行文字的基线对齐.
stretch;(默认值): 如果项目未设置高度或设为 auto, 将占满整个容器的高度.
6 align-content 多个项目在垂直上的对齐方式.
ps: 如果项目只有一根轴线, 该属性不起作用
属性和 align-content 的属性一样.
项目的 6 大属性
1 order 项目的排列顺序. 数值越小, 排列越靠前, 默认为 0(按代码书写的顺序来.)
2 flex-grow 项目的放大比例, 默认为 0(即如果存在剩余空间, 也不放大.)
如果 item 都为 1, 则均等平摊整个空间. 如果有一个 item 和其他的 item 不相等, 则按照比例放大.
3 flex-shrink 项目的缩小比例, 默认为 1(即如果空间不足, 该项目将缩小.)
如果 item 都相等, 则均等平摊空间, 若空间不足, 则都等比例缩小. 如果有一个 item 为 0; 当空间不足时, 其不缩小.
ps: 负值无效.
4 flex-basis 在分配多余空间之前, 项目占据的水平上的空间. 浏览器根据这个属性, 计算主轴是否有多余空间. 它的默认值为 auto, 即项目的本来大小.
5 flex 是 flex-grow, flex-shrink 和 flex-basis 的简写, 默认值为 0 1 auto. 后两个属性可选.
优先级: auto (1 1 auto) 或者 none (0 0 auto);
6 align-self 允许单个项目有与其他项目不一样的对齐方式, 可覆盖 align-items 属性. 默认值为 auto, 表示继承父元素的 align-items 属性, 如果没有父元素, 则等同于 stretch.
ps: 只针对于垂直方向上的, 水平方向上没有该属性.
属性和 align-items 是的属性一样, 多了一个 auto.
三 实例
flex 布局大部分实例可以参考 https://www.w3.org/TR/CSS-flexbox/#box-model https://www.w3.org/TR/css-flexbox/#box-model 写的特别详细.
1 div 使用 display:flex 后初始化的结果:
html 代码:
- <div class="container">
- <span class="item">
- <span class="item">111</span>
- </span>
- <span class="item">2</span>
- <span class="item">3</span>
- <span class="item">4</span>
- <span class="item">5</span>
- </div>
css 样式:
- .container{
- height: 500px;
- width: 500px;
- border: 1px solid;
- display: flex;
- position: relative;
- }
- .item{
- width: 50px;
- height: 50px;
- border:1px solid #ccc;
- float: right;
- vertical-align: middle;
- }
结果:
这个例子说明了:
1 只要父元素设置了 display:flex; 所有的 item 都成了行内块或者块级元素, 可以设置宽度高度.
2 item 中的 flaot 无效, 同样的 clear 也无效, vertical-align 也无效, 但是 position:absolute 是有效 (我看网上有人说是无效的.)
3 父元素设置了 flex 后, 只针对于子元素, 其后代元素不起作用, 若想要后代元素起作用, 必先给他的父元素声明 flex.
2 实现导航栏的 nav 两边对齐, 就是有导航的在左边, 登陆之类的在右边.
- html:
- <nav>
- <ul>
- <li><a href="/"> 首页 </a> </li>
- <li><a href="/"> 产品 </a></li>
- <li><a href="/"> 关于我们 </a></li>
- <li class="login"><a href="/"> 登陆 </a></li>
- </ul>
- </nav>
css 样式:
- nav> ul{
- display: flex;
- }
- nav li {
- list-style: none;
- margin: 10px;
- }
- .login{
- margin-left: auto;
- }
结果如下:
如果不使用 display:flex 来做的话, 可以使用 float 的方式来说, 但是相对来说稍微麻烦点, 代码量绝对比 flex 多. 追求简单何乐不为?
四 兼容性
如图可知, 兼容性基本上都支持来, 只有 ie9 以下不支持. flex 布局最适合在移动端进行布局, 开发中要适当的添加私有前缀来兼容.
- .flex() {
- display: -webkit-box;
- display: -moz-box;
- display:-webkit-flex;
- display: -ms-flexbox;
- display:flex;
- }
参考资料:
菜鸟教程 http://www.runoob.com/w3cnote/flex-grammar.html
阮一峰大大 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$ http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
来源: https://www.cnblogs.com/sqh17/p/9108595.html