弹性布局-CSDN博客

本文链接：https://blog.csdn.net/qq_45669178/article/details/132972335

主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow

贡献主题：https://github.com/xitu/juejin-markdown-themes

theme: cyanosis

highlight: monokai-sublime

一、分栏布局

1.设置栏数(最大栏数)

语法：column-count:数值;

2、设置每栏的宽度(最小宽度)

语法：column-width:数值+单位;

注：设置每栏的最小宽度，当屏幕缩小的时候，当每栏宽度小于最小栏数的时候，就不允许再小，所以这个时候，它就会减少栏数。但是当屏幕足够大的时候，他会增加栏数；当设置最大栏数的时候，他会给每栏增加宽度，而不会增加栏数。

3、设置栏间距

语法：column-gap:数值+单位;

注：当给多的时候，他会改变栏数。

语法：column-span:none(默认值)|all(跨栏显示);

注：该属性给需要跨栏显示的元素设置。

注：瀑布流的实现(纯css)

二、弹性布局

注：也可以叫flex布局。 css 语法：display: flex; 注：给父元素设置display: flex;，子元素就变成块元素了。 说明：

I.给元素设置了display:flex;就成为了弹性盒

II.父元素设置flex后，子元素的float(浮动),clear(清除浮动),vertical-align将会失效

III.我们把设置了flex的父元素称之为Flex容器，把子元素称之为 Flex项目

IV.当设置了flex布局后，会产生两根轴线：主轴和交叉轴(侧轴)

1、Flex容器属性

1)设置主轴的方向(flex项目排列的方向)

css 语法：flex-direction: row|row-reverse|column|column-reverse; row 默认值，主轴在水平方向，起点在左端

row-reverse 主轴在水平方向，起点在右端

column 主轴在垂直方向，起点在上沿

column-reverse 主轴在垂直方向，起点在下沿

注：设置了display:flex; 之后就算内容超出容器也不会换行显示，之后超出容器继续展示。

设置了那个属性，那个属性所对应的就是主轴。

2)设置flex项目单行或多行显示

css 语法：flex-wrap: nowrap|wrap|wrap-reverse; nowrap 不换行，flex项目在一行显示(默认值)

wrap flex项目多行显示

wrap-reverse flex项目多行显示，行的顺序是倒过来的

3)flex-direction和flex-wrap的简写方式

css 语法：flex-flow:row nowrap; (默认值)

4)设置主轴对齐方式

css 语法：justify-content: flex-start|flex-end|center|space-between|space-around;

flex-start 对齐主轴的起点

flex-end 对齐主轴的终点

center 居中对齐

space-between flex项目两端对齐，中间间隔相等

space-around flex项目两侧间隔相等

5)设置交叉轴对齐方式

css 语法：align-items: flex-start|flex-end|center|baseline|stretch; flex-start 对齐交叉轴的起点

flex-end 对齐交叉轴的终点

center 以交叉轴为参考，居中对齐

baseline flex项目第一行文字基线对齐

stretch flex项目没有设置高度或者为auto，将占满整个父元素的高度

使用flex布局的方式实现未知大小的元素在屏幕窗口水平垂直都居中： ```css html,body{ /让html和body的高度为屏幕窗口的高度(窗口高度自适应)/ height:100%; }

body{ display:flex; justify-content:center; align-items:center; } *使用flex布局的方式实现未知大小的子元素在父元素中水平垂直都居中* css 父元素 { display: flex; justify-content: center; align-items: center; } ```

6)设置多根轴线对齐方式

flex-end 对齐交叉轴的终点

center 以交叉轴为参考居中对齐

space-between 交叉轴两端对齐，轴线之间的间隔平均分布(第一行对齐起点，最后一行对其终点，中间间隔相等)

space-around Flex项目(沿交叉轴方向)之间的间隔相等

stretch flex项目没有设置高度或为auto，占满整个父元素的高度(这个是在多行的时候，并且没有设置高度，他会根据多行去占满元素)

2、Flex项目属性

注：Flex项目属性是给子元素加的。

1)设置flex项目排列顺序

css 语法：order: 整数值; 注：值越小越靠前(用它可以改变Flex的项目顺序)。

2)设置flex项目单独的交叉轴对齐方式

css 语法：align-self: flex-start|flex-end|center|baseline|stretch; html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> * { margin: 0; padding: 0; } div { width: 800px; height: 600px; background: pink; /* 给父元素设置display:flex;，子元素就变成块元素了 */ display: flex; justify-content: space-around; align-items: center; } p { display: block; height: 30px; width: 60px; text-align: center; line-height: 30px; border: 1px solid black; } div p:nth-child(1){ /* 希望它对其交叉轴的起点 */ align-self: flex-start; } div p:nth-child(2){ /* 这个其实不用写 */ align-self: center; } div p:nth-child(3){ align-self:flex-end; } </style> </head> <body> <div> <p>一</p> <p>二</p> <p>三</p> </div> </body> </html>

3)设置flex项目的放大比例

css 语法：flex-grow: 0|1|数值; 0 默认值，不放大

1 放大(1以上的就是放大，写多少他就是放大的比例)。

注：它可以等比例放大(最后都会根据比例去占满夫元素的剩余空间)。

flex-grow默认值为0,即使父元素存在剩余空间也不放大

flex-grow值为1时，flex项目等比例放大

4)设置flex项目的缩小比例

css 语法：flex-shrink: 0|1|数值; 注：flex-shrink默认值为1，当父元素空间不足时，flex项目等比例缩小

flex-shrink值为0时，flex项目不缩小，并且仍然在一行显示

5)设置flex项目占据主轴的空间

css 语法：flex-basis: auto | 数值 | 百分比;

6)flex-grow(放大),flex-shrink(缩小),flex-basis(主轴占据空间)的简写方式

语法：flex:0 1 auto; (默认值)

注：flex:1; <=> flex:1 1 0%;

应用一：实现了flex项目等比例分配空间 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>应用一：实现了flex项目等比例分配空间</title> <style> * { margin: 0; padding: 0; } div { width:100%; height: 200px; background:black; display: flex; } .box{ /* 下面是等比例空间 */ /* flex-basis:0%; flex-grow: 1; flex-shrink: 1; */ /* 这个也是简写 */ /* flex:1 1 0%; */ flex:1; } .box:nth-child(1){ background: cornflowerblue; } .box:nth-child(2){ background: cyan; } .box:nth-child(3){ background: darksalmon; } </style> </head> <body> <div>  <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </body> </html>