flex布局(2)
来源:互联网 发布:零件设计软件手机 编辑:程序博客网 时间:2024/06/05 16:58
下面讲的是在实际运用中 flex布局的几个属性。
以下6个属性设置在容器上。
下面是对每个属性进行逐一介绍:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
属性决定主轴的方向(即项目的排列方向)。
.box { flex-direction: row | row-reverse | column | column-reverse;}
它可能有4个值。
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
3.2 flex-wrap属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap
属性定义,如果一条轴线排不下,如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse;}
它可能取三个值。
(1)nowrap
(默认):不换行。
(2)wrap
:换行,第一行在上方。
(3)wrap-reverse
:换行,第一行在下方。
阅读全文
0 0
- flex布局(2)
- flex布局(2)
- flex布局(弹性布局)
- flex布局(弹性布局)
- flex布局2
- Flex布局(1)
- Flex布局(一)
- Flex布局(二)
- flex布局(一)
- flex布局(3)
- flex布局(4)
- flex布局(笔记)
- flex布局(1)
- flex布局(3)
- flex布局篇(一)
- flex布局篇(二)
- flex布局(待看)
- flex布局(Flexible Box)
- USACO section 1.3 Mixing Milk[贪心算法]
- Android系统权限和root权限
- VUE2.0 全套 demo 讲解 基础 5(class 与 style 绑定)
- I/O模型
- BZOJ 3224 TREAP 解题报告
- flex布局(2)
- Abbreviation: i.e. & e.g. & etc & a.k.a
- 水仙花数
- VMware Workstation Pro新建虚拟机的操作步骤
- 触发浏览器重绘的操作?
- socket服务器解决843端口策略文件的问题
- 基于vue.js重写Cnodejs.org社区的webapp
- Session 共享方案
- 远程连接并操作redis