深入浅析CSS3中的Flex布局整理


Posted in HTML / CSS onApril 27, 2020

Flexbox布局模块旨在提供一个更有效的方式,在一个容器里面去布局分配空间。即使容器的大小是未知的,或者动态变化的。

Flex 布局背后的主要思想是让容器能够改变其项目的宽度 / 高度(和顺序) ,以最佳地填充可用空间(主要是适应各种显示设备和屏幕大小)。 Flex 容器扩展项以填充可用的空闲空间或缩小它们以防止溢出。

最重要的是,flexbox 布局与常规布局(基于垂直方向的块布局和基于水平方向的内联布局)相比,具有方向不可知性。 虽然这些对于页面来说工作得很好,但是它们缺乏灵活性来支持大型或复杂的应用程序(特别是在方向改变、调整大小、拉伸、缩小等方面)。

原理

由于 flexbox 是一个完整的模块,而不是一个单独的属性,它涉及到很多东西,包括它的整个属性集。 其中一些被设置在容器上(父元素,称为“ flex container”) ,而另一些被设置在子元素上(称为“ flex item”)。如果“常规”布局基于块流方向和内联流方向,那么 flex 布局基于“ flex-flow 方向”。 请看一下规范中的这个图,解释一下 flex 布局背后的主要思想。

深入浅析CSS3中的Flex布局整理

项目将按照主轴(main-axis,从main start到main end)或交叉轴(从cross start到cross end)进行布局。

main-axis:主轴线,伸缩容器的主轴线是伸缩项目布局的主轴线。 注意,它不一定是水平的; 它取决于 flex-direction 属性

main-start, main-end:从 main-start 开始,到 main-end,flex 项目被放置在容器中

main-size:主尺寸,一个伸缩项目的宽度或高度,以主尺寸为准,是该项目的主尺寸。 Flex 项的主尺寸属性是“ width”或“ height”,以主尺寸中的值为准

cross axis:交叉轴,与主轴垂直的轴称为交叉轴。它的方向取决于主轴的方向

cross-start | cross-end:弹性线充满了项目,并放置到容器从cross-start延续到cross-end。

cross-size:flex item的宽度或高度,以交叉尺寸中的哪一个为准,就是项目的cross size。 cross size属性是交叉尺寸中的“width”或“height”中的任何一个。

父级属性(flex container)

 

深入浅析CSS3中的Flex布局整理

 1. flex-direction

flex-direction决定了主轴方向即flex item排列方向,除了默认的row方向之外,还可以纵向、反向(row-reverse/column-reverse)排列flex item

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

css:

.flex-container {
  display: flex;
  flex-direction: row;
}

效果:

深入浅析CSS3中的Flex布局整理 

2. flex-wrap

如果我们不想在窗口变窄的情况下压缩flex item,而是让超出边界的flex item换行显示那我们可以设置flex container的flex-wrap

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

css:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

效果:在页面不断变小的时候,就会换行

深入浅析CSS3中的Flex布局整理 

3. flex-flow

flex-direction和flex-wrap可以合并为一个属性flex-flow,比如: flex-flow: row-reverse wrap

4. justify content

这定义了沿主轴的对齐方式。 当一行中的所有 flex项都不灵活,或者灵活但已经达到其最大大小时,它有助于分配额外的剩余可用空间。 当项目溢出线的时候,它也对项目的排列有一定的控制作用。

.container {
  justify-content: 
flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right
}

深入浅析CSS3中的Flex布局整理

css:

.flex-container {
  display: flex;
  justify-content: center;
}

效果:

深入浅析CSS3中的Flex布局整理 

5. align-items

实现了flex方向的居中后,垂直于主轴方向的居中可以用align-items实现。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end
}

深入浅析CSS3中的Flex布局整理

css:

.flex-container {
  display: flex;
  align-items: center;
}

效果:

深入浅析CSS3中的Flex布局整理 

6. align-content

多行的情况下,将在内部对齐一个 flex 容器的线,类似于调整内容对齐主轴中单个项的方式。 如果flex只有一行,就不会起作用。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline
}

深入浅析CSS3中的Flex布局整理 

子类属性(flex item)

1. order

默认情况下,flex 项按源顺序排列。 但是,order 属性控制它们在 flex 容器中出现的顺序。

css:

.one {
  order: 3
}

.two {
  order: 1
}

.three {
  order: 2
}

效果:

深入浅析CSS3中的Flex布局整理 

2. flex-grow

在上面所有的例子中,三个flex item只占据了flex container小部分空间,如果想让flex item占满flex container我们需要给flex item设置flex-grow属性。顾名思义,grow意味着增长,用于控制flex item的尺寸的伸展。

css:

.one {
 flex-grow: 2;
}

.two {
  flex-grow: 8;
}

.three {
  flex-grow: 2;
}

效果:

深入浅析CSS3中的Flex布局整理 

划重点

  • flex-grow如果是负数则无效
  • 每个item划分多余的空间并不是按flex-grow的比例来划分,是每个item自身的width * 自身的flex-grow的结果的比例来划分!亲测!!!

3. flex-shrink

与flex-grow相对的是flex-shrink, flex-shrink用于控制子元素尺寸超过flex container后,对子元素的压缩。 划重点:

flex-shrink如果是负数则无效 4. flex-basis

这定义了在分配剩余空间之前元素的默认大小。

.flex-item {
  flex-basis: <length> | auto; /* default auto */
}

auto 关键字的意思是“查看自身的width 或 height 属性”。

5. flex

这是 flex-grow、 flex-shrink 和 flex-basis 组合的简称。 第二个和第三个参数(伸缩和伸缩基础)是可选的。建议使用此简写属性,而不是设置单个属性。

.flex-item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

6. align-self

这允许重写单个 flex 项的默认对齐方式(或 align-items 指定的对齐方式)。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

css:

.flex-container {
  display: flex;
  align-items: center;
}

.one {
  align-self: flex-end;
}

效果:

深入浅析CSS3中的Flex布局整理

到此这篇关于深入浅析CSS3中的Flex布局整理的文章就介绍到这了,更多相关css flex 布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 #HTML / CSS
CSS实现聊天气泡效果
Apr 26 #HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 #HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 #HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 #HTML / CSS
css3媒体查询中device-width和width的区别详解
Mar 27 #HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 #HTML / CSS
You might like
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
基于node实现websocket协议
2016/04/25 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
python处理数据,存进hive表的方法
2018/07/04 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python3远程监控程序的实现方法
2019/07/15 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
行政总监岗位职责
2013/12/05 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
自行车广告词大全
2014/03/21 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript