弹性盒模型 Flex
1. 什么是弹性盒模型
传统布局基本依靠display
float
position
来完成,有些特殊的布局写起来不太方便。
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
2. 如何使用
为父级元素添加 display: flex;
或者 display: inline-flex;
。其子元素则可按照弹性盒模型的规则进行布局。
3. flex子元素默认的展示方式
父级为弹性盒模型时,子元素默认有一些特殊的展示方式。当然我们可以通过后面的学习知道如何改变这些展示方式。
横向排列
默认盒模型中,各子元素上下排列,弹性盒模型中,子元素默认按主轴从左到右横向排列。(可以通过属性改变主轴及主轴起点)
<style>*{ margin: 0; padding: 0;}#wrap{display: flex;width: 500px;height: 500px;border: 1px solid red;margin: 50px auto;}#wrap .d1{width: 100px;height: 200px;background-color: #99cc99;}#wrap .d2{width: 150px;height: 150px;background-color: #f60;}#wrap .d3{width: 200px;height: 200px;background-color: #1da6ba} </style> <div id="wrap"><div class="d1">1</div><div class="d2">2</div><div class="d3">3</div> </div>
子元素总宽大于父级宽度,默认不换行,按比例缩放各个子元素的宽
<style>*{ margin: 0; padding: 0;}#wrap{display: flex;width: 500px;height: 300px;border: 1px solid red;margin: 50px auto;}/* d1实际宽 = 100/(100+200+300)*500=83.33 */#wrap .d1{width: 100px;background-color: #99cc99;}/* d2实际宽 = 200/(100+200+300)*500=166.67 */#wrap .d2{width: 200px;background-color: #f60;}/* d3实际宽 = 300/(100+200+300)*500=250 */#wrap .d3{width: 300px;background-color: #1da6ba} </style> <div id="wrap"><div class="d1">1</div><div class="d2">2</div><div class="d3">3</div> </div>
4. 父容器的属性
flex-direction
flex-direction
属性决定主轴的方向,默认为row
,即水平方向,起点在左。子项目按照主轴的方向从起点开始排列。
row
,默认值,水平主轴,起点在左;row-reverse
,水平主轴,起点在右;column
,垂直主轴,起点在上;column-reverse
,垂直主轴,起点在下。
flex-wrap
flex-wrap
属性决定子元素主轴摆放不下的时候,项目换不换行,默认不换行。none
,默认值,不换行;(摆放不下按比例缩放)wrap
,换行,第一排在最前;wrap-reverse
,换行,最后一排在最前。
flex-flow
flex-flow
属性是flex-direction
和flex-wrap
的缩写。默认值为
flex-flow: row none;
。justify-content
justify-content
属性定义子元素在主轴的对齐方式。flex-start
,默认值,起点对齐;flex-end
,终点对齐;center
,居中space-between
,两端对齐,中间间隔分均分配;space-around
,所有间隔分均分配,即所有子元素拥有相同的左右(上下)间隔。
align-items
align-items
定义子元素在副轴的对齐方式。flex-start
,副轴起点对齐;flex-end
,副轴终点对齐;center
,副轴居中对齐;baseline
,文本基线对齐stretch
,默认值,子元素如果没有设置高度(宽度),占满整个容器。(如果全部子元素都有设置高度值,则表现和flex-start
一致。)
align-content
align-content
属性定义多主轴之间(也就是换行后行与行之间)的对齐方式。所以,如果子元素没有换行,这个属性就不起作用。flex-start
,副轴起点对齐;flex-end
,副轴终点对齐;center
,副轴居中对齐;space-between
,副轴两端对齐,中间平均分配;space-around
,每行之间间距平均分配;strecth
,默认值,如果子元素没有设置高度,则占满对应主轴。(其余5个值中,没有设置高度的子元素和该行最高的高度一样)
5. 子元素的属性
order
order
属性定义子元素(视觉上)的展示顺序,值为一个数字,越小越优先摆放。flex-grow
flex-grow
属性用于规定 主轴有剩余空间时 子元素增大的分配比例,默认为0,即不增大。<style>*{ margin: 0; padding: 0;}.wrap{display: flex;width: 400px;height: 100px;margin: 20px auto;border: 1px solid red;font-size: 26px;font-weight: bolder;}.wrap .d1{width: 50px;background-color: #99cc99;}.wrap .d2{width: 150px;flex-grow: 1;background-color: #f60;}.wrap .d3{width: 50px;flex-grow: 2;background-color: #1da6ba;} </style> <div class="wrap"><div class="d1">1</div><div class="d2">2</div><div class="d3">3</div> </div>
flex-shrink
flex-shrink
属性用于规定 主轴空间不足时 子元素缩小的分配比例,默认为1,即分均分配来缩小。<style>*{ margin: 0; padding: 0;}.wrap{display: flex;width: 400px;height: 100px;margin: 20px auto;border: 1px solid red;font-size: 26px;font-weight: bolder;}.wrap .d1{width: 150px;background-color: #99cc99;flex-shrink: 1;}.wrap .d2{width: 200px;background-color: #f60; flex-shrink: 1;}.wrap .d3{width: 250px;background-color: #1da6ba; flex-shrink: 2;} </style> <div class="wrap"><div class="d1">1</div><div class="d2">2</div><div class="d3">3</div> </div>
flex-basis
flex-basis
属性定义在分配空间之前,子元素占据的主轴空间大小。默认值auto
即元素本来的大小。flex
flex
属性是flex-grow
flex-shrink
flex-basis
的简写,默认值就是这三者的默认值flex: 0 1 auto;
。最少需要写一个值,后两个值省略。flex
有两个特殊值,auto
相当于1 1 auto
,none
相当于0 0 auto
。推荐使用优先使用这个属性,而不是单独写三个分解属性,因为浏览器会自动推算相关值。
align-self
align-self
属性允许子元素自己规定自己的对齐方式。该属性默认继承父级的align-items
,可以通过修改各自的align-self
实现各个子元素不同的对齐方式。
弹性盒模型 Flex相关推荐
- CSS——弹性盒模型(Flex)
CSS--弹性盒模型 前言 本文大部分参考自阮一峰老师和B站后盾人的Flex布局教程. 原文地址:
- css_flex弹性盒模型/flex布局/flex在线可视化工具
文章目录 contents1: content 2: 测试你对flexbox的掌握 flex 模型 flex在线可视化工具(visual guide to css3 flexbox) flex布局 f ...
- html盒子模型子元素怎么水平占满父元素_CSS3——弹性盒模型-flex——父级属性...
flex-direction: flex-wrap: justify-content: align-items: align-content: display:flex: 可以填入两个值: inlin ...
- CSS弹性盒模型——flex详解
什么是flex 为什么用flex 初识flex flex-主轴方向与换行 flex-direction 例子: <!DOCTYPE html> <html lang="en ...
- CSS3——弹性盒模型-flex——等分布局、流式布局、圣杯布局(推荐阅读 很棒)
1.等分布局: 中间固定两边自适应: 固定两个,一个自适应 2.流式布局: 模仿float浮动布局 3.圣杯布局:(自适应布局) 先来看一下结构布局: <div class="wrap ...
- CSS3——弹性盒模型-flex——等分布局、流式布局、圣杯布局
1.等分布局: 中间固定两边自适应: 固定两个,一个自适应 2.流式布局: 模仿float浮动布局 3.圣杯布局:(自适应布局) 先来看一下结构布局: <div class="wrap ...
- css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型 元素分类 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
- css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
- flex 会使div撑满_如何讲清楚Flex弹性盒模型(中)?
上一篇我们讲解了, flex容器的属性, 如何定义主轴方向, 以及主轴侧轴对齐方式 这篇讲解子元素的一些属性. 如何对子项目进行排序? 弹性盒模型第一次可以让我们方便的对元素进行排序 使用 order ...
最新文章
- 开始整SWF文字高亮显示——第一步:解析PDFToFlex源文件(修改补充版)
- 五种常用的JavaScript自定义对象方式
- 一种三维结构化导航的思路
- ubuntu开机出现:system program problem detected
- SAP FI 会计凭证过账bapi BAPI_ACC_DOCUMENT_POST
- Python培训技术分享:Python Cookie HTTP获取cookie并处理
- c++学习笔记之输入/输出流
- Servlet使用适配器模式进行增删改查案例(Emp.java)
- python log日志级别_python – 日志记录:如何为处理程序设置最大日志级别
- LeetCode-665:非递减数列
- this.fields.get(c) is undefined
- eclipse中jsp文档无语法着色,安装Eclipse Java Web Developer Tools插件
- T60 Fan Error 解决办法.转自ZOL产品论坛-作者zxymb
- URP渲染管线实战教程系列 之URP渲染管线实战解密(一)
- mac备忘录html,MAC 使用备忘录
- Linux 重新加载 nginx 配置命令
- 第2次作业:软件案例分析
- 密苏里大学计算机排名,2019上海软科世界一流学科排名计算机科学与工程专业排名密苏里大学排名第301-400...
- 什么都会过去的,什么都有结束
- python读取串口数据 绘图_使用Python串口实时显示数据并绘图的例子
热门文章
- 午夜之后的暗杀者 维基解密又公布CIA的两个Windows恶意软件框架 主要用于监控及执行命令...
- android模拟器模拟拨号电话号码,如何在Android的Genymotion模拟器中拨打电话?
- LANDSAT8 LEVEL2 COLLECTION2如何在ENVI中正确打开
- Python黑马头条推荐系统第五天 头条排序模型进阶-神经网络
- XMind 8 Update 7下载安装破解
- 无线路由器的dhcp服务器如何设置,磊科无线路由器上DHCP服务器怎么设置
- nginx下强制跳转到www域名,域名重定向
- PHP redis key
- Spark学习-入门介绍
- 如何利用基于PXI的下一代ATE系统测试平台进行军事/航天/卫星电子设备测试