弹性布局（flex布局、伸缩布局）

一、什么是弹性布局

flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局

注：当我们为父盒子设置弹性布局后，子元素的 float 、 clear 和 vertical-align 属性将失效

.box{display: flex;
}
.box{display: inline-flex;
}
/*Webkit 内核的浏览器，必须加上-webkit前缀。*/
.box{display: -webkit-flex; /* Safari */display: flex;
}

二、布局原理

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

    <style>div{display: flex;width: 800px;height: 300px;background-color: green;justify-content: space-around;align-items: center;}div span{  width: 240px;height: 150px;background-color: greenyellow;}</style>
</head>
<body><div><span></span><span></span><span></span></div>
</body>

flex布局的原理：通过给父盒子添加flex属性，来控制盒子的位置和排列方式

三、父容器常见属性

1. flex-direction 设置主轴方向（即项目的排列方向）

在flex布局中，是分为主轴和交叉轴两个方向

  • 默认主轴方向就是x轴方向，水平向右
  • 默认交叉轴方向就是y轴方向，水平向下

主轴方向是可以通过flex-direction设置的，交叉轴始终垂直主轴。

属性值 说明
row（默认值） 主轴为水平方向，起点在左端（从左到右）
row-reverse 主轴为水平方向，起点在右端（从右到左）
column 主轴为垂直方向，起点在上沿（从上到下）
column-reverse 主轴为垂直方向，起点在下沿（从下到上）

2. justify-content 设置项目在主轴上的排列方式

属性值 说明
flex-start（默认值） 从头部开始（如果x是主轴，则从左到右）
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x，则水平居中）
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间（最常用）

图示：为了看得更方便加了边框





3. flex-wrap 设置项目是否换行

默认情况下，项目都排在一条轴线上，flew-wrap属性定义，flex布局中默认是不换行的，如果装不下会缩小子元素的宽度

属性值 说明
nowrap 默认值，不换行
wrap 换行
wrap-reverse 换行，第一行在下方

4. align-items 设置交叉轴上的子元素排列方式

假设交叉轴从上到下；在子项为单行的时候使用

属性值 说明
flex-start（默认值） 交叉轴的起点对齐（从上到下）
flex-end 交叉轴的终点对齐（从下到上）
center 交叉轴的中点对齐（挤在一起居中）
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度（拉伸）
baseline 项目的第一行文字的基线对齐




5. align-content 设置交叉轴上的子元素排列方式（多行）

设置子项在交叉轴排列方式并且只能用于多行子项（单个项有宽度，一行放不下时，换行：flex-wrap:wrap;），单行子项下是没有效果的

属性值 说明
flex-start（默认值） 在交叉轴的头部开始排列
flex-end 在交叉轴的尾部开始排列
center 在交叉轴中间显示
space-around 子项在交叉轴平分剩余空间
space-between 子项在交叉轴先分部在两头，在平分剩余空间
stretch 设置子项元素高度平分元素高度





align-items和align-content区别
  • align-items适用于单行的情况下
  • align-content适用于多行（子项有宽度一行放不下换行时）的情况（单行是无效的）

6. flex-flow 复合属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {flex-flow: row wrap;
}

总结

  • flex-direction：设置主轴方向
  • justify-content：设置主轴上的子元素排列方式
  • flex-wrap：设置子元素是否换行
  • align-items：设置交叉轴上的子元素的排列方式（单行）
  • align-content：设置交叉轴上的子元素的排列方式（多行）
  • flex-flow：复合属性，flex-direction属性和flex-wrap属性的简写形式

四、子项常见属性

1. flex属性

​ flex属性定义子项分配剩余的空间，用flex来表示占多少份数

2. align-self属性

​ 控制子项这在侧轴上的排列方式，允许单个项目与其他的项目有不一样的对齐方式。可覆盖align-items属性。

​ 默认值是auto，表示基础父元素的align-items属性，如果没有父元素，则等同于stretch。

3. order属性

​ 数值越小，排列越靠前，默认为0（通过css oder属性调整盒子的位置）

4. flex-grow属性

​ flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

5. flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

6. flex-basis

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

弹性布局flex 伸缩布局 flex布局 什么是弹性布局 justify-content相关推荐

  1. flex布局(弹性布局、伸缩布局)

    flex是CSS3中的一种布局方式 主要介绍下弹性布局的常用的一些属性 当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和 ...

  2. flex 平铺布局_CSS3 Flex布局（伸缩布局盒模型）学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  3. CSS3 Flex布局（伸缩布局盒模型）学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  4. flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结

    各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...

  5. flex布局单独一行_CSS3 Flex布局（伸缩布局盒模型）

    CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒(Flexible Box)模型,此布局对于设计比较复杂的页面非常有用,特别是"垂直居中"布局,非常容易实现. 一 ...

  6. 移动WEB开发之flex伸缩布局

    学习目标 能够说出flex盒子的布局原理 能够使用flex布局的常用属性 能够独立完成携程移动端首页案例 1. flex布局体验 1.1 传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性, ...

  7. bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

    轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名 描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...

  8. 第103天：CSS3中Flex布局（伸缩布局）详解

    一.Flex布局 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{display: ...

  9. Flutter 弹性布局的基石： flex 和 flexible

    Flutter 弹性布局的基石 是 flex 和 flexible.理解了这两个 widget,后面的row,column 就都轻而易举了.本文用示例的方式详细介绍 flex 的布局算法. flex ...

最新文章

  1. 【c语言】位操作实现无符号整数的乘法运算
  2. 独家 | Python处理海量数据集的三种方法
  3. linux线程创建 类函数吗,linux多线程创建时使用类成员函数作为参数
  4. zongzi tutorial
  5. JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
  6. android app源码大全_Android秋招秘籍，看我如何搞定BAT，Vivo，爱奇艺
  7. flash位图技术研究篇(8):扫描像素点
  8. mysql5.7 之 sql_mode=only_full_group_by问题
  9. 《开源容器云OpenShift：构建基于Kubernetes的企业应用云平台》一2.3　完善OpenShift集群...
  10. 深入理解Javascript之this关键字
  11. 网页设计之 HTML代码的理解.
  12. OpenModelica.VehicleInterfaces离线库安装
  13. SSM 前台AJax传递参数和controller后台接收的方法
  14. 台湾华夏堂古代玉器收藏家～件件珍贵难得一见
  15. 图片如何降低分辨率 ？如何缩小照片分辨率不改变图像大小？
  16. Android中的Junit单元测试
  17. Nasdaq股票代码表 zt
  18. Unity实现幸运大转盘
  19. PyQt5快速入门（一）PyQt5简介
  20. 计算机考研真题及答案(含选择题解析)

热门文章

  1. 计算机原理较好的教材,《高等学校计算机专业教材精选·计算机原理：计算机组成原理》低价购书_教材教辅考试_孔网...
  2. 完全背包问题状态转移方程解释
  3. 新知卫星地图 2023 高清卫星图源 谷歌高清图源解析
  4. C语言面试题一——华为篇
  5. python execjs详解_Python基于execjs运行js过程解析
  6. Unity TouchScripts.Gestures.PressGesture
  7. 用独立分量分析分离混合信号
  8. 7-74 三角形判断 (15 分) 给定平面上任意三个点的坐标(x1,​​ y1)、(x2,​​ y2)、(x3,​​ y3)，检验它们能否构成三角形。PTA：中M2021春C、Java入门练习第I段
  9. Matlab 之 Curve Fitting APP 使用笔记
  10. 构建OPC UA 可执行模型（3）-建模工具