Flex布局(弹性布局)-图文介绍
目标： 能够使用Flex布局模型灵活、快速的开发网页
Flex布局/弹性布局特点：
- 是一种浏览器提倡的布局模型。
- 布局网页更简单、灵活。
- 避免浮动脱标的问题
作用：
- 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局
设置方式 :
- 父元素添加 display: flex，子元素可以自动的挤压或拉伸。
组成部分 ：
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴/交叉轴
！注意这里的主轴和侧轴， 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。
1主轴对齐方式：
修改主轴对齐方式属性: justify-content
主轴对齐方式，主轴如上图所示，使用justify-content时，子集的弹性盒子沿主轴排列，根据修改属性值获得自己想要的样式。
效果演示：
space-between，沿着主轴排列，空白间距均分在相邻盒子之间。
space-enenly，沿着主轴排列，弹性盒子与容器之间的间距相等。
space-around，沿着主轴排列，around有四周周围的意思，这个就是空白间距分在盒子的两侧，与enenly比起来，盒子1，2的空白间距大一些，之间的间距是1，2均分的，相当于盒子1左右都有间距，和2合并了，就显示大。
2侧轴对齐方式：
使用align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式属性:
- align-items（添加到弹性容器）
- align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
侧轴和主轴类似，主轴默认在水平方向，侧轴在竖直方向。在侧轴属性值中，center和stretch使用比较多。
演示：
center侧轴对齐方式
stretch ，这个是默认值，在子集盒子1，2，3没有高度时候使用，默认沿着主轴线被拉伸至铺满容器。
align-self，单独设置盒子2的对齐样式，这里是在自己的css样式中加了center对齐。
3伸缩比：使用flex属性修改弹性盒子伸缩比
使用方式：flex : 值;
在子集盒子中使用，值取值是整数值，意思就是把父级盒子剩下的分成几份分给自己，假如子集盒子1和2（没有3）值都是1，就是（1+1）/2,每个盒子占比50%，以此类推。
这里盒子1，3值的为flex：1；而盒子2的值为：flex：3；
4修改主轴方向 ：
1：思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？
1：答：水平方向。
2：问：那如何实现内容垂直排列呢？
如图 ：
目标：使用flex-direction改变元素排列方向
- 主轴默认是水平方向, 侧轴默认是垂直方向
- 修改主轴方向属性: flex-direction
修改主轴方向后，默认水平值被修改，此时就要注意主轴方向和排列方式，也要思考对应的原侧轴排列方式。
5弹性盒子换行：
思考：默认情况下，多个弹性盒子如何显示？
答：若子集的盒子过多，其设置的宽度加起来大于父级盒子的，此时盒子不会自己换行排列，而是全部挤在一起，压缩了自己本身的宽度
如何解决？
弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式 ：align-content
取值与justify-content基本相同
效果类似下图：
Flex布局(弹性布局)-图文介绍相关推荐
- HTML/CSS布局—Flex布局(弹性布局)
目的:能够使用Flex布局模型灵活.快速的开发网页 Flex布局/弹性布局: 是一种浏览器提倡的布局模型 布局网页更简单.灵活 避免浮动脱标的问题 作用: 基于 Flex 精确灵活控制块级盒子的布局方 ...
- flex布局(弹性布局、伸缩布局)
flex是CSS3中的一种布局方式 主要介绍下弹性布局的常用的一些属性 当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和 ...
- Flutter 布局Row（水平方向布局）、Column（垂直方向布局）、Wrap（可以自动换行的布局）、Flex（弹性布局）、Stack（叠层布局）、
1.线性布局 Row 水平方向布局 Row({... //表示水平方向子组件的布局顺序(是从左往右还是从右往左),//默认为系统当前Locale环境的文本方向(如中文.英语都是从左往右,而阿拉伯语是从 ...
- 自适应网页(响应式布局)+弹性布局
1.自适应网页 1.声明viewport元标签 <meta name="viewport" content="width=device-width,initial- ...
- CSS display:flex（弹性布局）
序: 考虑到实际开发中,写样式的机会不多,但是不可能不写,脑子容量总是不够用,每次都查,这次自己就总结下,方便下次查找(举例以下常用六个属性,语法都是加在父元素身上的). 1.flex-direc ...
- Html——flex布局 弹性布局
以下文章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案. 一.flex布局的语法 块级元素 :display: flex ---- 将容器盒模型作为块级弹性伸缩盒显示 行 ...
- Css 弹性布局（Flex）详细介绍（Flex 属性详解、场景分析）
目录 前言 Flex 布局是什么? Flex 简介 Flex 容器属性 Flex 基本使用 场景一 flex-direction 场景二 justify-content align-it ...
- flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
- flex 左右布局_移动端开发常用布局：前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
- flex弹性布局之弹性盒子模型
一,flex弹性盒子布局 1. flex弹性盒子介绍 弹性盒子是 CSS3 的一种新的布局模式.CSS3 弹性盒( Flexible Box 或 flexbox,是一种当页面需要适应不同的屏幕大小以及 ...
最新文章
- 实时监控用户输入--中文输入解决方案
- XCTF-Web-高手区-easytornado
- 【数学】异或（jzoj 2298）
- sql server模糊查询、分组
- 荔枝派 Nano 全志 F1C100s 编译运行 Linux ubuntu并升级gcc
- C语言学习系列（六）基本语法
- 【渝粤教育】21秋期末考试物权法10774k1
- C# 编译器选项 /platform（指定输出平台）32位程序运行到x64平台的问题
- java非静态内部类如何创建对象实例
- 安川服务器显示fn001,安川伺服驱动器功能参数设置
- docker之SonarQube集成阿里p3c规则
- 什么是xserver和xclient
- 建筑工程测量与测绘毕业论文范文
- 猿辅导2017 笔试题
- FITURE 、百度、咕咚“围猎”智能健身镜
- 4P和4C的物理学分析
- 一级导数和二级导数的意义
- Git - remove pushed file
- python将A文件夹内的所有内容原封不动复制搬运到B文件夹
- 冰岛警方选中IDEMIA为其提供新的出入境系统