HTML布局方式Flex属性详解
背景
flexbox布局方式旨在容器中的元素在排版，对其，剩余空间处理的问题上提供一个高效的解决方式，无论子元素的大小是已知或未知，动态或者静态。flexbox布局的思想就是通过改变子元素的长、宽、顺序来更好的利用容器的空间。
而且，相比于规则的布局方式如block，inline，flexbox布局方式对于子元素的排列方向也是任意的。
注意：flexbox布局更加适合于应用组件或者小尺寸的布局，对于大尺寸布局，grid更加适合。
一、flex容器属性
1.1 display属性
.container {display: flex; /* or inline-flex */
}注意css3的columns属性对于flex容器是没有效果的。
1.2 flex-direction属性
.container {flex-direction: row | row-reverse | column | column-reverse;
}row（默认值）：从左到右
1.3 flex-wrap属性
.container{flex-wrap: nowrap | wrap | wrap-reverse;
}nowrap：该值为默认值，所有的子元素都在一行
1.4 flex-row属性
flex-flow: <‘flex-direction’> || <‘flex-wrap’>1.5 justify-content属性
flex-end: 子元素紧挨着容器最后摆放
center: 子元素在摆放在容器中间
space-between: 子元素均匀的摆放在容器; 起一个元素在起始位置, 最后一个元素在最末端。
space-around: 子元素均匀的摆在容器中，每个子元素前面的距离都是一样的，但是子元素之间的距离并不是一样，第一个和最后一个到边缘的距离只是为其他两个子元素距离的一半。
space-evenly: 所有的间距都是一样的，包括第一个和最后一个到边缘的距离。
1.6 align-items属性
flex-end: 元素垂直方向从下开始摆放
center: 元素垂直方向居中
baseline: 元素垂直方向以第一个元素文本为基准线摆放
stretch (default): 元素垂直方向拉伸填满容器(min-width/max-width仍然有效)
1.7 align-content属性
flex-end: 底部对齐
center: 居中对齐
space-between: 均匀对齐，第一个元素在顶部，最后一个元素在底部
space-around: 垂直均匀对齐，每个元素的上下都有相同的间距
stretch (default): 元素垂直拉伸填满容器
二 子元素属性
2.1 order属性
.item {order: <integer>; /* default is 0 */
}2.2 flex-grow属性
.item {flex-grow: <number>; /* default 0 */
}注意：只是接受非负的数字
2.3 flex-shrink属性
.item {flex-shrink: <number>; /* default 1 */
}2.4 flex-basis属性
.item {flex-basis: <length> | auto; /* default auto */
}如果值设置为 0, 包含内容的额外的空间不会考虑在内。 如果设为 auto, 额外的空间是一句flex-grow设置的值来分配的。
2.5 flex属性
.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}强烈推荐使用这个flex而不是单独设置各个不同的属性。
2.6 align-self属性
.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}注意：float，clear、vertical-align对于flex元素没有作用。
HTML布局方式Flex属性详解相关推荐
- Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
目录 前言 Flex 布局是什么? Flex 简介 Flex 容器属性 Flex 基本使用 场景一 flex-direction 场景二 justify-content align-it ...
- 弹性布局flex属性详解
注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用. flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间. flex 属性是 flex-grow.flex-shrink ...
- CSS 浮动布局放弃float，拥抱flex（详解）
CSS 浮动布局放弃float,拥抱flex(详解) 文章目录 CSS 浮动布局放弃float,拥抱flex(详解) 说明 Flex布局 容器和项目 容器属性 flex-direction属性 fle ...
- 弹性盒子（flexbox）布局属性详解
弹性盒子布局属性详解 1 弹性盒子概述 2 基本概念 3 常用属性 3.1 布局方向flex-direction 3.2 环绕效果flex-wrap 3.3 水平对齐方式justify-content ...
- php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解 一.设定文字字体.颜色.大 ...
- android fragment加载布局的方式,Android中Fragment的加载方式与数据通信详解
Android中Fragment的加载方式与数据通信详解 发布时间:2020-08-22 18:55:57 来源:脚本之家 阅读:155 作者:Joah 一.加载方式 1. 静态加载 1.1 加载步骤 ...
- 开启子进程的两种方式、进程间内存空间隔离、进程对象的方法或属性详解
1.操作系统(推荐查看书籍:现代操作系统) 操作系统是位于计算机硬件与软件之间的控制程序 作用: 1.将硬件的复杂操作封装成简单的接口,给用户或者应用程序使用 ...
- Vue项目使用symbol的方式引入svg图标和svg path大法d属性详解，section标签
symbol标签 svg path大法d属性详解 section标签
- display属性详解及用法
display属性详解 1 block.inline.inline-block 2 flow-root 3 table.inline-table 4 flex.inline-flex 5 none 6 ...
- android 图片横竖判断_Android横竖屏切换及其对应布局加载问题详解
本文为大家分享了Android横竖屏切换及其对应布局加载问题,供大家参考,具体内容如下 第一,横竖屏切换连带横竖屏布局问题: 如果要让软件在横竖屏之间切换,由于横竖屏的高宽会发生转换,有可能会要求不同 ...
最新文章
- Android - 小的特点 - 使用最新版本ShareSDK手册分享（分享自己定义的接口）
- H5开发的web APP和原生APP的区别
- Spring Boot Spring MVC异常处理原理分析
- 蓝牙耳机测试软件apk_黑鲨蓝牙游戏耳机2解决延迟问题：比AirPods Pro更强
- 线程queue、事件event及协程
- 什么是Docker？看这一篇文章就够了
- 创朵计算机维修,创建第一个计算机监控软件服务
- 查看网卡流量：nload
- PHP心脏装置,“人工心脏”不再科幻 “钢铁侠”已成现实
- 9.性能之巅 洞悉系统、企业与云计算 --- 磁盘
- linux openfire mysql_Linux系统安装openfire及其如何后台运行openfire
- Python 辛普森积分法 simps计算sin(x)的值（完美实现）
- Oracle数据恢复顾问(Data Recovery Advisor)
- 如何快速打开.pos
- 宗地自动编号及属性赋值
- 程序员离职后跳槽到国企，每天主动加班到10点，结果试用期没过？
- 倡导国稻种芯·中国水稻节 万祥军：农民丰收节金秋消费季
- Java微信公众号高级 微信墙,JAVA折腾微信公众平台（Token验证）
- 全靠这套面试题，历经一年学弟从家里到了阿里，只要有梦想总会实现的
- 文旅部、国家发改委等十部门：推广旅游电子合同使用