CSS 笔记（十）：布局 —— 伸缩

基本概念

如果元素设置了 display: flex; 那么此容器称为伸缩容器，它的子元素称为伸缩项，在容器的水平方向存在一条主轴，主轴的起点默认在容器的最左侧，主轴的终点默认在容器的最右侧，在容器的垂直方向存在一条侧轴，侧轴的起点默认在容器的最顶部，侧轴的终点默认在容器的最底部，伸缩项默认以主轴和侧轴方向水平和垂直排版

主轴方向

默认情况下，伸缩容器的主轴为水平方向，主轴方向为从左至右，而所有伸缩向默认从主轴的起点开始排版

属性

flex-direction

修改主轴的起点位置

值

row（默认）
row-reverse
column
column-reverse

row 为默认取值，即从左至右，而 column 可将主轴方向修改为从上至下，具有 reverse 的值表示与相应方向相反的方向，例如，row-reverse 表示从右至左，另外，伸缩容器的主轴与侧轴总是正交的，如果主轴为水平方向，那么侧轴为垂直方向，如果主轴为垂直方向，那么侧轴为水平方向

对齐方式

主轴

属性

justify-content

修改伸缩项在伸缩容器中主轴方向上的对齐方式，写在伸缩容器中

值

flex-start（默认）
flex-end
center
space-between
space-around

当伸缩项在伸缩容器中排版之后，默认在主轴起点左对齐，而 flex-end 表示在主轴终点右对齐、center 表示在主轴居中对齐、space-between（两端对齐）表示将容器中未被伸缩项占用的空间平均置于各容器之间，保证最左边和最右边的元素对齐于伸缩容器两侧、space-around（环绕对齐）表示将容器中未被占用的空间平局置于各容器两侧

侧轴

属性

align-items

修改所有伸缩项在伸缩容器中侧轴方向上的对齐方式，写在伸缩容器中

值

flex-start（默认）
flex-end
center
baseline
stretch

值 flex-start、flex-end、center 与主轴对齐方式中相同值的含义相同，区别在于方向为侧轴方向，而 baseline 表示所有伸缩项在侧轴方向上以基线为准对齐、stretch 表示将所有伸缩项的高度拉伸为侧轴高度，但是伸缩项不能设置高度，否则失效

属性

align-self

修改某个伸缩项在伸缩容器中侧轴方向上的对齐方式，写在某个伸缩项中

值

flex-start（默认）
flex-end
center
baseline
stretch

值含义与属性 align-items 相同，区别在于作用范围不同，align-self 为伸缩容器中的某个伸缩项，而 align-items 为伸缩容器中的所有伸缩项

换行

默认情况下，如果在伸缩容器中的一行不能容纳所有伸缩项时，不是换行，而是所有伸缩项会被等比拉伸至可以容纳到一行当中

属性

flex-wrap

设置所有伸缩项不能容纳在一行时，是否换行

值

nowrap（默认）
wrap
wrap-reverse

默认情况下值为 nowrap，表示不换行，wrap 表示换行，在换行之后，行与行之间会存在间隙，与换行后的对齐方式有关，而 wrap-reverse 表示换行后以行为单位翻转

属性

align-content

设置换行后，所有伸缩项在伸缩容器中的对齐方式

值

flex-start
flex-end
center
space-between
space-around
stretch（默认）

值含义与 justify-content 基本相同，区别在于对齐方向为侧轴方向，flex-start、flex-end、center 将换行后的伸缩项作为一个单位，以侧轴起点、居中和终点对齐，而 space-between（两端对齐）、space-around（环绕对齐）、stretch（拉伸对齐）将换行后的每一行作为一个单位，将未被伸缩项占用的伸缩容器平局分布于每一个单位中，其中 stretch 与 align-items 中的不同，此处将空白区域平局分布于每一行的一侧，保证在拉伸之后所有行可以填充侧轴

伸缩项

排序

属性

order

实现伸缩项的排序功能

值

默认情况下，order 的值为 0，如果 order 的值越大，那么具有此属性的伸缩项越靠后，即在伸缩容器中，伸缩项的顺序以 order 从小到大排序

扩充

属性

flex-grow

当伸缩项的宽度总和小于伸缩容器的宽度时，可以通过设置 flex-grow 属性来扩充元素宽度

值

默认情况下，取值为 0，表示不扩充、以设置的宽度显示，当取值不为 0 时，将伸缩容器未被伸缩项占用的宽度以每个伸缩项的 flex-grow 值为比例分配，取值越大，分配越多

收缩

属性

flex-shrink

当伸缩项的宽度总和大于伸缩容器的宽度时，可以通过设置 flex-shrink 属性来收缩元素宽度

值

默认情况下，取值为 1，表示等比例收缩，当取值不为 0 时，将伸缩项之于伸缩容器的溢出宽度以每个伸缩项的 flex-shrink 值为比例分配，取值越大，收缩越多

如果不设置 flex-grow 或 flex-shrink 属性，那么未设置的伸缩项不会被扩充或收缩
宽度并不一定是 width，最终取决于主轴的方向，如果主轴在水平方向，那么宽度即表示 width，如果主轴在垂直方向，那么宽度即表示 height

宽度

属性

flex-basis

设置伸缩项的宽度，仅在伸缩布局中有效，如果设置了此属性，那么 width 属性将无效，即 flex-basis 的优先级高于 width

值

auto（默认值）
(…)px

如果在一个伸缩项中，同时设置了 width 和 flex-basis 属性，如果任意一个的值为 auto，另一个为像素，那么最终效果取决于另外一个属性

简写

flex: grow shrink basis;

flex 属性的默认值为 0 1 auto

布局

圣杯布局

一种三栏布局，左右两侧宽度固定，中间一栏的宽度自适应

在一个容器中放置三个盒子，内容盒子位于第一个位置
设置内容盒子的宽度为 100%
设置左右两侧盒子的宽度和高度，宽度固定、高度与内容元素高度相同
为容器设置两侧的内边距与左右两侧盒子的宽度相同
将内容盒子与左右两侧盒子均设置为左浮动
将左侧盒子的左外边距设置为 -100%
将左侧盒子设置为相对定位，调整位置至左侧空白部分
将右侧盒子的做外边距设置为 -右侧盒子宽度
将左侧盒子设置为相对定位，调整位置至右侧空白部分
设置容器的最小宽度属性（min-width）

之所以设置左侧盒子的左外边距为 -100%，是因为所有的盒子均为左浮动，由于贴靠现象的出现，导致它们不在一行显示，但本质上是在一行显示的，所以为左侧盒子设置左边距为 -100%，可以使左侧盒子在向左移动容器宽度的距离，从而贴靠内容盒子的左侧，右侧盒子同理，使右侧盒子向左移动自身宽度的距离，从而贴靠内容盒子的右侧

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Cup</title><style>* {margin: 0;padding: 0;}.box {padding: 0 200px;min-width: 600px;}.content {width: 100%;height: 400px;background-color: red;float: left;}.left {width: 200px;height: 400px;background-color: yellow;float: left;margin-left: -100%;position: relative;right: 200px;}.right {width: 200px;height: 400px;background-color: yellow;float: left;margin-left: -200px;position: relative;left: 200px;}</style>
</head><body><div class="box"><div class="content"></div><div class="left"></div><div class="right"></div></div>
</body></html>

双飞翼布局

一种三栏布局，左右两侧宽度固定，中间一栏的宽度自适应

在一个容器中放置三个盒子，内容盒子位于第一个位置
设置内容盒子的宽度为 100%
设置左右两侧盒子的宽度和高度，宽度固定、高度与内容元素高度相同
设置内容盒子与左右两侧盒子均为左浮动
在内容盒子中添加一个子内容盒子
设置子内容盒子的高度与内容盒子相同、不设置宽度，设置外边距上下为 0px，左右为两侧盒子的宽度
设置左侧盒子的左外边距为 -100%
设置右侧盒子的右外边距为 -右侧盒子宽度

之所以设置左侧盒子的左外边距为 -100%，是因为所有的盒子均为左浮动，由于贴靠现象的出现，导致它们不在一行显示，但本质上是在一行显示的，所以为左侧盒子设置左边距为 -100%，可以使左侧盒子在向左移动容器宽度的距离，从而贴靠内容盒子的左侧，右侧盒子同理，使右侧盒子向左移动自身宽度的距离，从而贴靠内容盒子的右侧

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Plane</title><style>* {margin: 0;padding: 0;}.content {width: 100%;height: 400px;background-color: red;float: left;}.content_in {height: 400px;margin: 0 200px;}.left {width: 200px;height: 400px;background-color: yellow;float: left;margin-left: -100%;}.right {width: 200px;height: 400px;background-color: yellow;float: left;margin-left: -200px;}</style>
</head><body><div class="box"><div class="content"><div class="content_in"></div></div><div class="left"></div><div class="right"></div></div>
</body></html>

CSS 笔记（十）：布局 —— 伸缩相关推荐

CSS 笔记（十二）：预处理器 —— Less
CSS 笔记(十二):预处理器 -- Less 什么是 CSS 预处理器 CSS 预处理器就是使用某一种语言为 CSS 增加一些动态语言的特性,使用 CSS 预处理器可以使 CSS 具有简洁,适应性强 ...
CSS 学习笔记 - 网格布局（栅格系统）
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式基本概念属性说明容器属性内容属性效果展示 grid-template-rows.grid-template-columns 基本用法 ...
关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
html+css移动端布局
文章目录移动端一.移动端基础 **1 .浏览器现状** **2 .手机屏幕现状** **3.常见移动端屏幕尺寸** **4.移动端调试方法** 5.总结二.视口 **1.布局视口** `layo ...
前端 HTML/CSS （十五）
目录前端 HTML/CSS (十五) 动画简单的实现设置多个动画延迟播放动画的迭代次数设置动画的播放方向 animation-timing-function,改变内部的时序关键帧动画响 ...
聊聊 CSS 中的布局模式
本文来自作者大漠在 GitChat 上分享「聊聊 CSS 中的布局模式」,「阅读原文」查看交流实录. 「文末高能」编辑 | 哈比一.聊聊 CSS 中的布局模式在大家的印象中,CSS 非常的 ...
聊聊CSS中的布局模式
聊聊CSS中的布局模式在大家的印象中,CSS非常的简单,在此我想再强调一下,虽然CSS简单,但并不代表容易.随着Web技术的发展飞快,CSS经过二十多年的发展,其变化也是非常的大.CSS涵盖的技术点 ...
翻译 | CSS网格（CSS Grid）布局入门
原文地址:Getting to know CSS Grid Layout 原文作者:Chris Wright 译者:华翔校对者:珂珂.干干翻译 | CSS网格(CSS Grid)布局入门 bann ...
html5 居于页面中心,css笔记：如何让一个div居于页面正中间
如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...
CSS Grid网格布局全攻略
CSS Grid网格布局全攻略所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

CSS 笔记（十）：布局 —— 伸缩

CSS 笔记（十）：布局 —— 伸缩

基本概念

主轴方向

对齐方式

主轴

侧轴

换行

伸缩项

排序

扩充

收缩

宽度

简写

布局

圣杯布局

双飞翼布局

CSS 笔记（十）：布局 —— 伸缩相关推荐

最新文章

热门文章