css 布局 flex
2019-09-30 13:37
507 查看
cursor
设置鼠标放上去后的形状
visability
设置是否可见
flex
详见这篇文章https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox
设置方法
dsplay: flex
flex 模型
方向
flex-direction: column //设置为列布局 flex-direction: row //设置为行布局
换行
flex-wrap: wrap
设置每项的宽度
flex: 200px;
flex 动态尺寸
如果一个div里有三个article,且已经设置了div的
display: flex。这时三个arti是并排的,且宽度是相等的。
如果进行以下设置
article { flex: 1; } article:nth-of-type(3) { flex: 2; }
则三个宽度比是1:1:2。
如果
article { flex: 1 200px; } article:nth-of-type(3) { flex: 2 200px; }
则每个flex的宽度最小是200px
水平和垂直对齐
div { display: flex; align-items: center; justify-content: space-around; }
align-items说的是div中的元素沿交叉线排列。
justify-content说的是沿主线排列。
在线试align-items的几个选项
align-items的几个选项分别是
flex-start
flex-end
stretch
默认值 高度和父元素一样center
justify-content的几个选项
flex-start
flex-end
space-round
沿主线均匀排列,两头有空白space-between
沿主线均匀排列,两头没有空白
flex 项排序
相关文章推荐
- CSS学习之Flex弹性布局语法介绍
- CSS之深入理解 flex 布局以及计算
- CSS弹性盒模型flex在布局中的应用
- CSS之flex布局
- CSS布局——Flex布局
- 解决css中flex布局的元素有padding情况下各弹性元素width出现的问题
- flex 布局下,css 设置文本不换行时,省略号不显示的解决办法
- 前端入门5-CSS弹性布局flex
- CSS Flexbox 布局
- 【css】flexible.css - flex布局的兼容写法
- 详解CSS的Flex布局
- CSS 设置 flex 布局
- css flex布局实用
- css 一列固定一列自适应布局-flex布局实现
- 第六章2:弹性布局语法(比CSS盒模型更方便、优化的Flex 布局语法)
- 后端人员如何快速上手css(flex布局)
- 详解CSS的Flex布局
- css --- > 使用flex写一个常见的两列布局
- CSS中flex布局 弹性盒模型
- ReactNaive之CSS和Flex布局