flex布局1
来源:互联网 发布:java 解决高并发 编辑:程序博客网 时间:2024/06/05 02:05
今天主要从他几个属性来介绍弹性盒子
display: flex;把元素设置成弹性容器
1.flex-direction:可以改变flex容器的方向让其子元素来弹性布局
row定义主轴方向为X轴从左到右
row-reverse 从右到左
column 定义主轴方向为Y轴从上到下
2.justify-content排列方式,让其子元素按不同方式进行排列
flex-start: 从行首开始排列。
flex-end: 从行尾开始排列
center: 元素向每行中点排列。
space-between : 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐,每行最后一个元素与行尾对齐。
space-around:在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
3.flex-wrap用来设置换不换行
nowrap:flex 的元素被摆放到到一行
wrap: flex 元素大于整个父级整个元素时就会另起一行进行排列
wrap-reverse :和 wrap 的行为一样,但会与原来的方向相反
4.align-items:弹性盒子的对齐方式
baseline设置文本对其。如下图就是设置的baseline对其
阅读全文
0 0
- FLex布局详解---1
- Flex布局(1)
- flex布局1
- flex布局(1)
- Flex布局
- flex布局
- Flex 布局
- flex布局
- Flex 布局
- Flex布局
- Flex布局
- Flex布局
- flex布局
- Flex布局
- flex布局
- flex布局
- Flex布局
- flex布局
- jsp中的cookie与session的区别
- Java集合框架之Map---HashMap和LinkedHashMap源码分析
- matlab 二分法
- 枚举的定义和使用
- ts、js自定义方法,实现延迟
- flex布局1
- int (*p)[10] 和 int *p[10]的区别
- Spring RestTemplate get方式发送数据服务器端拿到为空
- IOS第三方库GPUImage添加到Xcode工程
- 58. Length of Last Word
- CodeChef Graphcnt:Counting on a directed graph(支配树)
- 视图观察者
- JS笔记 —— JS正则表达式大全
- LaTeX技巧一:如何在标题页面上创建背景图像?