CSS flex 布局学习笔记
写在前面
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item)。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
下面了解下容器和元素上有哪些常用的属性
容器上的属性
flex-direction
元素在容器里摆放的方向
注意当你调转行或列的方向后,flex-start和flex-end对应的方向也被调转了
注意当flex以列为方向时,justify-content控制纵向对齐,align-items控制横向对齐
row: 元素摆放的方向和文字方向一致。
row-reverse: 元素摆放的方向和文字方向相反。
column: 元素从上放到下。
column-reverse: 元素从下放到上
flex-wrap
让容器中的元素换行显示
nowrap: 所有的元素都在一行。
wrap: 元素自动换成多行。
wrap-reverse: 元素自动换成逆序的多行
justify-content(常用)
主轴(水平方向)的对齐方式
flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between: 多余的空白间距只在元素中间区域分配
space-around: around是环绕的意思,元素周围保持相等的距离,空白间距在元素的周围
space-evenly: evenly是匀称、平等的意思,每个flex子项两侧空白间距完全相等
align-items(常用)
交叉轴(垂直方向)的对齐方式
flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器
align-content
决定行与行之间的间隔
flex-start: 多行都集中在顶部。
flex-end: 多行都集中在底部。
center: 多行居中。
space-between: 行与行之间保持相等距离。
space-around: 每行的周围保持相等距离。
stretch: 每一行都被拉伸以填满容器。
元素上的属性
order
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0
flex-grow(常用)
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。
如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍
flex-shrink
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。
如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
flex-basis
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为 0 1 auto
。后两个属性可选
align-self
可以设置单个元素有与其他元素不一样的对齐方式
flex-start: 元素与容器的顶部对齐。
flex-end: 元素与容器的底部对齐。
center: 元素纵向居中。
baseline: 元素在容器的基线位置显示。
stretch: 元素被拉伸以填满整个容器
练习
实现一个平均布局
通过给
item
元素的套一层item-wrap
,然后item-wrap
设置左右负的margin-left,margin-right
实现平均布局<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="item-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>
.container{
width: 800px;
margin: 0 auto;
border: 1px solid red;
}
.item-wrap{
display: flex;
flex-wrap: wrap;
margin: 0 -4px;
}
.item{
width: calc(25% - 8px);
height: 194px;
background: #ddd;
margin: 4px;
}
实现圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="main">
<div class="nav">nav</div>
<div class="content">content</div>
<div class="aside">aside</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
.container{
display: flex;
flex-direction: column;
}
.container > .header{
height: 50px;
background: #eee; }
.container > .main{
display: flex;
height: calc(100vh - 100px);
}
.container > .main >.nav,
.container > .main >.aside
{
width: 230px;
background-color: #ddd;
}
.container > .main >.content{
flex: 1;
background: #fff;
}
.container> .footer{
height: 50px;
background: #eee;
}
参考
CSS flex 布局学习笔记的更多相关文章
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- Flex 布局学习笔记
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Flex布局学习笔记
任何元素都可以使用Flex布局,包括行内元素 display: flex; display: inline-flex使用Flex布局之后,子元素的float, clear, vertical-alig ...
- 前端flex布局学习笔记
flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...
- CSS常用布局学习笔记
水平居中-行内元素 如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- flex 布局学习
flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...
- 从今天开始 每天记录HTML,CSS 部分的学习笔记
从今天开始 每天记录HTML,CSS 部分的学习笔记
随机推荐
- 获取用户真实IP:(模拟:客户端--F5--nginx--tomcat 后端获取用户真实IP)
模拟:客户端--F5--nginx--tomcat 后端获取用户真实IP 192.168.109.137 :nginx01(充当第一层代理==F5)192.168.109.138 :nginx02(二 ...
- 将Java对象序列化成JSON和XML格式
1.先定义一个Java对象Person: public class Person { String name; int age; int number; public String getName() ...
- 使用Node,Vue和ElasticSearch构建实时搜索引擎
(译者注:相关阅读:node.js,vue.js,Elasticsearch) 介绍 Elasticsearch是一个分布式的RESTful搜索和分析引擎,能够解决越来越多的用例. Elasticse ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- Test 3.27 T1 立方体大作战
Description 一个叫做立方体大作战的游戏风靡整个 Byteotia.这个游戏的规则是相当复杂的,所以我们只介绍他的简单规则:给定玩家一个有 2n 个元素的栈,元素一个叠一个地放置.这些元 ...
- java生成128A条形码
添加maven依赖 <dependency> <groupId>net.sf.barcode4j</groupId> <artifactId>barco ...
- Airtest断言方法
1,第一种断言方式:验证UI界面 a.存在 b.不存在 2,断言第二种方式:验证数值 assert_equal:断言相等 assert_not_equal:断言不等 3,我发现Airtest一个bug ...
- 【2019 Multi-University Training Contest 9】
01: 02:https://www.cnblogs.com/myx12345/p/11666961.html 03: 04: 05:https://www.cnblogs.com/myx12345/ ...
- 攻防世界 | hello_pwn
看样子是要让我们通过read(0, &unk_601068, 0x10uLL),读入 unk_601068 将 dword_60106C 覆盖 6c-68=4,所以: from pwn imp ...
- 原来在UNITY中使用system.io下的所有函数都可以用相对路径 : Assets/xx
代码如下图,这样就不用在绝对路径和相对路径之间不断转换了. 想要得到绝对路径时就傅 Application.dataPath + xxx using System.Collections; usin ...