一分钟理解Flexbox弹性布局
来源:互联网 发布:网络歌手排行榜2014 编辑:程序博客网 时间:2024/05/21 19:31
图解 Flexbox
本文图片、部分翻译来自原文 How Flexbox works — explained with big, colorful, animated gifs
属性 #1 display: flex
示例如下
上面4个 div
默认为 display: block
我们给其父级容器添加
#container { display: flex;}
其实把每个 div
添加了一个 flex context (弹性上下文)
属性 #2 Flex Direction
一个 Flexbox 的容器有两个轴:主轴 交叉轴。如下:
默认情况下容器中的每个元素都会沿着主轴自左向右一次排列。所以容器设置为 display: flex
后所有的 div
会排列在一行上
但是 Flex-direction 属性可以让主轴旋转,如下:
注意: flex-direction: column
并不是把 div
从主轴移动到交叉轴上,而是让主轴从水平变为垂直
flex-direction 还有两者值: row-reverse
和 column-reverse
(顾名思义 就是反转)
属性 #3 Justify Content
justify-content 用来控制元素在主轴上的对齐方式
先深入理解下主轴和交叉轴的区别。首先设置为 flex-direction: row
#container { display: flex; flex-direction: row; justify-content: flex-start;}
justify-content
有5个可选值:
- flex-start
- flex-end
- center
- space-between
- space-around
space-between
会使每个 div
之间产生相同的小的间隔,但在 div
和容器之间没有间隔
space-around
会在每个 div
两侧各产生一个相同的间隔,即容器和最外层的 div
之间的间隔刚好是两个 div
间隔的一半
注意: justify-content
是沿着主轴工作的。 flex-direction
是改变的主轴方向的。
属性 #4 Align Items
justify-content
是沿着主轴工作的,而 align-items
则是沿着交叉轴工作。
首先重置 flex-direction: row
两个轴展示如下:
align-items
有5个可选值:
- flex-start
- flex-end
- center
- stretch
- baseline
看看后两个,其中每个 div
中的数字都包含在一个 p
标签中
align-items: stretch
时每个 div
都会充满交叉轴
align-items: baseline
时按照 p
标签的底部对齐
注意: align-items: stretch
时每个 div
的 height 必须为 auto 否则 height 属性会覆盖 stretch 的效果
align-items: baseline
时如果 div
内没有 p
标签或者 div
内没有文字或者子标签内没有文字将按照每个 div
的底部对齐。如下:
进一步理解主轴和交叉轴的区别,把 justify-content 和 align-items 合在一起,看看在 flex-direction 两种值下的效果
flex-direction: row
时每个 div
按照水平主轴排列
flex-direction: column
时每个 div
按照垂直主轴向下排列
属性 #5 Align Self
align-self
可以手动设置一个元素的对齐方式
它会针对一个 div
覆盖掉 align-items
属性,因为容器内元素属性都为 auto
, 所以每个 div
都会使用父容器的 align-items
属性值
#container { align-items: flex-start;}.square#one { align-self: center;}/* 只有 #one 这个 div 会居中 */
将前两个 div
设置 align-self 属性,后两个使用 align-items: center
和 flex-direction: row
如下
- 一分钟理解Flexbox弹性布局
- flexbox弹性盒子布局
- RN-flexbox(弹性布局)
- flexbox弹性布局
- Flexbox 弹性盒子布局
- Flexbox弹性盒子布局
- 弹性布局FlexBox
- flexbox弹性布局
- CSS3--弹性布局flexbox
- React Native 弹性布局FlexBox
- flexbox 弹性盒布局和布局原理
- flexbox 弹性盒布局和布局原理
- CSS弹性盒子Flexbox布局详解
- CSS弹性盒子Flexbox布局详解
- CSS弹性盒子Flexbox布局详解
- css3 flexbox layout(弹性布局)完全解析
- flexbox-CSS3弹性盒模型flexbox布局完整版教程
- flexbox-CSS3弹性盒模型flexbox布局完整版教程
- CC430低功耗调节简述
- php中的单引号与双引号
- 动态加载js文件和css脚本
- C++知识总结(2)--字符串和数组
- keepalived实现高可用的LVS负载均衡集群
- 一分钟理解Flexbox弹性布局
- 原型模式
- android实战jsoup实现网络爬虫爬糗事百科主界面
- JDK1.8新特性(三)函数式接口
- OpenPano:如何编写一个全景拼接器
- 浅学swift中的闭包
- 理解jquery的$.extend()、$.fn和$.fn.extend()
- 为什么我们不推荐运行自己的邮件服务器
- Ubuntu Core 配置