flex布局怎么设置子元素大小_48张小图带你领略Flex 布局之美
前言
最近在项目中,遇到布局问题,有时候,需要堆叠很多的样式,去排版,一定程度上增加了代码量,那么有没有更加方便的布局方式呢??
48张图带你从0到1掌握flex布局方式。
flex布局
在某种程度上,简便我们布局的一个难题,接下来的篇幅将介绍它的使用?
flex基本概念
要想熟练掌握flex布局的话,你需要理解两个概念:轴
和容器
?
从上面图来看,我们将flex布局分为两部分讲,轴
和容器
。
「轴」
- 主轴(mian axis)
- 交叉轴(cross axis)
「容器」
- 父容器(container)
- 子容器(item)
打个预防针,flex布局
涉及到12个CSS属性,父容器,子容器各6个。
接下来先梳理常见的属性,不常见的放在进阶部分来梳理。
轴
我们知道,轴
包括主轴
和交叉轴
,那么它们的方向是如何决定呢?我们直接从一张图看懂它?
默认情况下,「主轴」的方向是从左向右的,「交叉轴」垂直于主轴,逆时针方向90度,那么接下来我们看「flex-direction」是如何决定主轴的。讲这个之前,我们需要明白?
交叉轴是由主轴决定的,主轴又是由flex-direction决定的。
flex-direction属性设置在父容器上,这样子才可以生效。
flex-direction: row | row-reverse | column | column-reverse
首先布局如下?
<div class="wrapper"> <div class="flex1">子盒子#flex1: 1 div> <div class="flex2">子盒子#flex2: 1 div>div>
接下来,我们看看他们的效果吧?
flex-direction: row
当你给父盒子(wrapper)设置属性flex-direction: row
效果?
「结论」
- flex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
- 简单理解就是「主轴沿着水平方向向右」
flex-direction: row-reverse
当你给父盒子(wrapper)设置属性flex-direction: row-reverse
效果?
我们可以看到这两个盒子的位置发生了变化,这个就是主轴起点和主轴终点位置「置换」的原因。
「结论」
- 表现和row相同,但是置换了主轴起点和主轴终点。
- 简单理解就是「主轴沿着水平方向向左」,与文本方向相反。
flex-direction: column
当你给父盒子(wrapper)设置属性flex-direction: column
效果?
可以看到,子盒子的布局发生了变化,形成了在Y轴上的布局方式,并且书写方式跟布局一样。
「结论」
- flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
- 简单的理解,就是主轴变成Y轴方向,方向从上到下布局。
flex-direction: column-reverse
当你给父盒子(wrapper)设置属性flex-direction: column-reverse
效果?
可以看到,子盒子的布局跟column差不多,唯一不同的是,方向上发生了变化。
「结论」
- 表现和
column
相同,但是置换了主轴起点和主轴终点 - 简单的理解,就是主轴变成Y轴方向,方向从下到上,与书写的方向相反。
容器
这里就分为「父容器」和「子容器」,我们先来看看父容器?
父容器
- justify-content: 「设置子元素在主轴方向上的对齐方式」
- align-items:「设置子元素在交叉轴方向上的对齐方式」
justify-content
这个属性设置在父容器上,「决定子元素在主轴方向上的对齐方式」,我们看看它们具体表现吧?
justify-content: flex-start
当你给父盒子(wrapper)设置属性justify-content: flex-start
效果?
「结论」,子元素沿着主轴方向开始对齐。
justify-content: flex-end
当你给父盒子(wrapper)设置属性justify-content: flex-end
效果?
「结论」,子元素沿着主轴方向终点对齐。
justify-content: center
当你给父盒子(wrapper)设置属性justify-content: center
效果?
「结论」,子元素在主轴方向上水平居中。
justify-content: space-between
当你给父盒子(wrapper)设置属性justify-content: space-between
效果?
「结论」,子元素在主轴方向上「两端对齐,项目之间间隔相等」。
justify-content: space-around
当你给父盒子(wrapper)设置属性justify-content: space-around
效果?
「结论」,子元素在主轴方向上「均匀排列每个元素,每个元素周围分配相同的空间」。
align-items
这个属性设置在父容器上,「决定子元素在交叉轴方向上的对齐方式」,我们看看它们具体表现吧?
align-items: flex-start
当你给父盒子(wrapper)设置属性align-items: flex-start
「结论」,子元素在交叉轴方向上起点对齐。
align-items: flex-end
当你给父盒子(wrapper)设置属性align-items: flex-end
「结论」,子元素在交叉轴方向上终点对齐。
align-items: center
当你给父盒子(wrapper)设置属性align-items: center
「结论」,子元素在交叉轴方向上居中对齐。
align-items: baseline
当你给父盒子(wrapper)设置属性align-items: baseline
「结论」,子元素在交叉轴方向上以文字基线对齐,具体不清楚的,可以自行百度。
align-items: stretch
当你给父盒子(wrapper)设置属性align-items: stretch
「结论」,这个属性是默认的,如果项目未设置高度或者设为 auto,将占满整个容器的高度。
子容器
先看张图片
子容器的话,这里就介绍两个属性?
flex
属性 定义在主轴是如何伸缩的- 子容器是有弹性的,它们会自动填充剩余空间,子容器的伸缩比由
flex
属性决定。 - flex是多个属性的缩写,允许1-3个值的连写,具体参考上面的图。
- 子容器是有弹性的,它们会自动填充剩余空间,子容器的伸缩比由
align-self
属性 「单独设置子容器如何沿交叉轴排列」- 每个子容器都可以单独定义沿交叉轴排列方式。
- 该属性的取值跟父容器中的align-items属性一致,如果两者相同的话,则以子容器
align-self
属性为主。
flex作用规则
- 三个属性的简写,是flex-grow flex-shrink flex-basis的简写
- 常用简化写法?
- flex:1 —> flex:1 1 0%;
- flex:3 —> flex:3 1 0%;
- 注意:flexbox布局和原来的布局是两个概念,部分css属性在flexbox盒子里面不起作用,eg:float, clear, column,vertical-align 等等
注意?flex-grow flex-shrink flex-basis 这三个属性会在后续介绍
具体的flex取值问题,可以参照下面的图?
「align-self作用规则」
// 起始端对齐align-self : flex-start;
// 末尾段对齐align-self : flex-end;
基线对齐// 末尾段对齐align-self : baseline;
可以看到的话,它们对齐的方式是第一行文字的基线。
拉伸对齐align-self : stretch;
flex更深入了解
上面介绍的常见几个属性掌握的话,基本上可以满足日常的开发布局需求,剩下的一些属性,接下来将梳理一遍,这样子的话,早日成为flex布局进阶者
。
父容器
「flex-wrap」 设置换行方式
- 绝对子容器是否可以选择换行,一般而言有三种状态,支持换行的话,也支持逆序换行。
「flex-flow」 设置轴向与换行组合
- 是 flex-direction 和 flex-wrap 的简写。
- 所以只要掌握,
flex-direction
和flex-wrap
即可。
「align-content」 多行沿交叉轴对齐方式
- 当子容器多行排列时,设置行与行之间的对齐方式。
flex-wrap
设置子容器的换行方式,通常有三个取值?
flex-wrap: wrap | nowrap | wrap-reverse
三种情况?
// 允许换行flex-wrap : wrap
效果?
// 不允许换行flex-wrap : nowrap
效果?
// 允许逆向换行flex-wrap : wrap-reverse
效果?
flex-flow
先来一张图?
更多取值信息请查看
flex-direction
和 flex-wrap
可以查看MDN上,或者把之前的flex-direction
和 flex-wrap
两者取值看过一遍,那么使用这个属性就没有问题啦,这里也就不过多的举例子了,取值有三种情况?
单独设置flex-direction取值,比如
flex-flow: row | column
单独设置flex-wrap取值
flex-flow: wrap | nowrap | wrap-reverse
同时设置两者取值
flex-flow: row wrapflex-flow: column nowrap
align-content
这个属性是定义子容器在交叉轴的排列方式,也就是对齐方式。
首先上一张图?
根据这些取值,我们来看看布局效果吧?
// 起始端对齐align-content: flex-start
效果?
// 末尾段对齐align-content: flex-end
效果?
// 居中对齐align-content: center
效果?
// 等间距均匀分布align-content: space-between
效果?
// 等边距均匀分布align-content: space-around
效果?
// 拉伸对齐align-content: stretch
效果?
// 基线对齐align-content: baseline
效果?
子容器
「flex-grow」 设置扩展比例
「flex-shrink」 设置收缩比例
「flex-basis」 设置基准大小
「order」 设置排列顺序
flex-grow
子容器弹性伸展的比例,简单理解,就是把剩余的空间按比例分配给子容器。
我们看个例子
flex-shrink
子容器弹性收缩的比例。简单理解,就是当你子容器超出的部分,会按照对应的比例给子容器减去对应的值。
我们来看下效果?
当取值为0时,就会溢出,那么我们给它们设置一个值?
这样子的超出的部分就会按照比列减去。
flex-basis
有几个点需要注意的是?
在不伸缩的情况下,
flex-basis
给子容器设置大小才有作用。当主轴为横向时,即?
flex-direction:row | row-reverse
flex-basis
设置的大小为宽度,并且会覆盖witdh值
当主轴为纵向时,即?
flex-direction:column | column-reverse
flex-basis
设置的大小为高度,并且会覆盖height值
我们来看看两种情况?
当主轴为横向时flex-direction:row | row-reverse
效果?
当主轴为纵向时flex-direction:column | column-reverse
效果?
order
- 每个子容器的
order
属性默认为0 - 通过设置
order
属性值,改变子容器的排列顺序。 - 可以是负值,数值越小的话,排的越靠前。
直接看效果图?
总结
这个时候,是不是需要总结一下呢?
先看看子容器属性?
再看看父容器属性?
梳理的是常见的属性值,对于一些不常见的属性值,请移步MDN
❤️看完三件事
如果你觉得这篇内容对你挺有启发,我想邀请你帮我三个小忙:
- 点赞,让更多的人也能看到介绍内容(收藏不点赞,都是耍流氓-_-)
- 关注公众号“前端劝退师”,不定期分享原创知识。
- 也看看其他文章
劝退师个人微信:huab119
也可以来我的GitHub
博客里拿所有文章的源文件:
前端劝退指南:https://github.com/roger-hiro/BlogFN一起玩耍呀
在看、点赞、转发支持作者❤️
flex布局怎么设置子元素大小_48张小图带你领略Flex 布局之美相关推荐
- flex布局怎么设置子元素大小_Web前端(三):前端布局
前端布局对前端开发而言是必不可少的环节之一.我所理解的前端布局可以分成两个大类,第一类是元素层面的布局,就是像absolute布局.flex布局等等,都是描述元素在页面上以何种形式呈现,即局部的布局: ...
- flex布局怎么设置子元素大小_Chrome72 嵌套 flex 布局修改,你的网站可能会发生布局错乱...
起源 2019 年 1 月 29 日,Chrome72 正式版(72.0.3626.81)发布,本次发布带来了一个改变,且没有在更新日志中提及,该改变导致某些网站发生了布局错乱.该改变主要针对的是嵌套 ...
- CSS初入门:设置子元素水平居中的方式
问题描述: 用几种方式实现元素位于父元素的水平居中位置,如图: 解决 方式一 通过控制子元素的左边框和右边框来达到居中的效果. 在那之前,我先举个我遇到过的错误示范 <!DOCTYPE html ...
- CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
场景 Flex是Flexible Box的缩写,意为"弹性布局". 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列. 实现如下类似布局 最外层是是一个div,div里面是 ...
- flutter - GridView 网格布局,以及设置子元素的间距和大小
基础的 GridView 布局 参数 说明 gridDelegate 对子元素进行修饰,由于SliverGridDelegate 是一个抽象类, 找它的实现类有 [SliverGridDelegate ...
- 设置子元素在主轴(横轴)方向上的对齐方式为容器的开头_今日推送 CSS Flexbox布局(上)...
在" Flexbox布局"模块之前,有四种布局模式: 四种布局模式: 块布局block,常见的就是div 内联inline,用于文本 表table,用于二维表数据 定位positi ...
- 用 justify-content 属性设置子元素两端对齐
外层元素的 justify-content 属性设置为space-between即可实现子元素两端对齐 <!DOCTYPE html> <html> <head> ...
- 使用flex布局把三个元素分配成两列,第二列垂直布局两个元素
https://stackoverflow.com/questions/43056180/flexbox-3-divs-two-columns-one-with-two-rows/43057107 最 ...
- flex 换主轴后子元素占满_Flex布局
在没有接触Flex之前一直使用float.display.position .说实话用起来非常恶心.当使用Flex时,我们可以简洁优雅实现复杂的页面布局 1.Flex 布局? 在 flex 容器中默认 ...
最新文章
- VMware workstation中rhel安装VMware tools失败
- ubuntu 如何关闭离线模式_如何在macOS中打开或关闭Mac暗黑模式
- 用户从服务器上获取信息资源,从服务器端获取资源动态加载到场景.docx
- javafx官方文档学习之二Scene体系学习一
- 电路常识性概念(5)-上拉电阻、下拉电阻 / 拉电流、灌电流 / 扇出系数
- shell--指“提供使用者使用界面”的软件(命令解析器)
- Java——集合(输入5个学生的信息按总分高低排序)
- 直接通过ADO操作Access数据库(修改版)
- 将Numpy数组保存为图像
- Hibernate反射DAO模式
- (转)中国著名黑客你知道多少?
- python处理考勤数据_python连接中控考勤机分析数据
- Java double value_Java Double doubleValue()用法及代码示例
- 03.NopCommerce功能与特点介绍
- 换发型算法_【AI超级美发师】深度学习算法打造染发特效(附代码)
- 我的IT相关网址收藏
- 【Orangepi Zero2 全志H616】wiringPi外设SDK安装
- 关于绘制星级评价方法
- Win10移动热点无法打开,手机无法连接电脑热点
- 直播回顾 | 论道原生:云原生大数据建设实践