6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

css笔记10-css 弹性盒子&度量单位

2022-05-01 0 59 web前端社区

6.jpg 0 前端程序猿

弹性盒子

Flex 是 Flexible Box 的缩写,意为“弹性布局”或者“弹性盒子”,是 CSS3 中的一种新的布局模式,可以简便、完整、响应式地实现各种页面布局,当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前,几乎所有的浏览器都支持 Flex 布局。

1. 弹性盒子基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称“项目”。容器默认存在两根轴,分别为水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。如下图所示:

提示:可以通过将元素的 display 属性设置为 flex(生成块级 flex 容器)或 inline-flex(生成类似 inline-block 的行内块级 flex 容器)。当一个元素设置了 Flex 布局以后,其子元素的 float、clear 和 vertical-align 等属性将失效。

CSS 中提供了以下属性来实现 Flex 布局:

属性 描述
display 指定 HTML 元素的盒子类型
flex-direction 指定弹性盒子中子元素的排列方式
flex-wrap 设置当弹性盒子的子元素超出父容器时是否换行
flex-flow flex-direction 和 flex-wrap 两个属性的简写
justify-content 设置弹性盒子中元素在主轴(横轴)方向上的对齐方式
align-items 设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式
align-content 修改 flex-wrap 属性的行为,类似 align-items,但不是设置子元素对齐,而是设置行对齐
order 设置弹性盒子中子元素的排列顺序
align-self 在弹性盒子的子元素上使用,用来覆盖容器的 align-items 属性
flex 设置弹性盒子中子元素如何分配空间
flex-grow 设置弹性盒子的扩展比率
flex-shrink 设置弹性盒子的收缩比率
flex-basis 设置弹性盒子伸缩基准值

按照作用范围的不同,这些属性可以分为两类,分别为容器属性(flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content)和项目属性(order、align-self、flex、flex-grow、flex-shrink、flex-basis)。下面就来介绍一下这些属性的使用。

2. 容器属性

1) flex-direction

flex-direction 属性用来决定主轴的方向(即项目的排列方向),属性的可选值如下:

描述
row 默认值,主轴沿水平方向从左到右
row-reverse 主轴沿水平方向从右到左
column 主轴沿垂直方向从上到下
column-reverse 主轴沿垂直方向从下到上
initial 将此属性设置为属性的默认值
inherit 从父元素继承此属性的值

示例代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. #main {
  6. border: 1px solid #CCC;
  7. padding: 5px;
  8. position: relative;
  9. }
  10. .row, .row_reverse, .column, .column_reverse{
  11. display: flex;
  12. margin-bottom: 5px;
  13. }
  14. .row {
  15. flex-direction: row;
  16. }
  17. .row_reverse {
  18. flex-direction: row-reverse;
  19. }
  20. .column {
  21. flex-direction: column;
  22. }
  23. .column_reverse {
  24. flex-direction: column-reverse;
  25. position: absolute;
  26. top: 120px;
  27. left: 400px;
  28. }
  29. .row div, .row_reverse div, .column div, .column_reverse div {
  30. width: 50px;
  31. height: 50px;
  32. border: 1px solid black;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div id="main">
  38. <div class="row">
  39. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  40. </div>
  41. <div class="row_reverse">
  42. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  43. </div>
  44. <div class="column">
  45. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  46. </div>
  47. <div class="column_reverse">
  48. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  49. </div>
  50. </div>
  51. </body>
  52. </html>

2) flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素(项目)超出父容器时是否换行,属性的可选值如下:

描述
nowrap 默认值,表示项目不会换行
wrap 表示项目会在需要时换行
wrap-reverse 表示项目会在需要时换行,但会以相反的顺序
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值

示例代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. #main {
  6. border: 1px solid #CCC;
  7. padding: 5px;
  8. }
  9. .nowrap, .wrap, .wrap_reverse {
  10. display: flex;
  11. flex-direction: row;
  12. margin-bottom: 15px;
  13. }
  14. .nowrap {
  15. flex-wrap: nowrap;
  16. }
  17. .wrap {
  18. flex-wrap: wrap;
  19. }
  20. .wrap_reverse {
  21. flex-wrap: wrap-reverse;
  22. }
  23. .nowrap div, .wrap div, .wrap_reverse div {
  24. width: 70px;
  25. height: 50px;
  26. border: 1px solid black;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="main">
  32. <div class="nowrap">
  33. <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  34. </div>
  35. <div class="wrap">
  36. <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  37. </div>
  38. <div class="wrap_reverse">
  39. <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  40. </div>
  41. </div>
  42. </body>
  43. </html>

3) flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写,语法格式如下:

flex-flow: flex-direction flex-wrap;

示例代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. .flex_flow {
  6. display: flex;
  7. flex-flow: row-reverse wrap;
  8. }
  9. .flex_flow div {
  10. width: 60px;
  11. height: 60px;
  12. margin-bottom: 5px;
  13. border: 1px solid black;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="flex_flow">
  19. <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
  20. </div>
  21. </body>
  22. </html>

4) justify-content

justify-content 属性用于设置弹性盒子中元素在主轴(横轴)方向上的对齐方式,属性的可选值如下:

描述
flex-start 默认值,左对齐
flex-end 右对齐
center 居中
space-between 两端对齐,项目之间的间隔是相等的
space-around 每个项目两侧的间隔相等
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值

示例代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. .flex {
  6. display: flex;
  7. flex-flow: row wrap;
  8. margin-top: 10px;
  9. }
  10. .flex div {
  11. width: 60px;
  12. height: 60px;
  13. margin-bottom: 5px;
  14. border: 1px solid black;
  15. }
  16. .flex-start {
  17. justify-content: flex-start;
  18. }
  19. .flex-end {
  20. justify-content: flex-end;
  21. }
  22. .center {
  23. justify-content: center;
  24. }
  25. .space-between {
  26. justify-content: space-between;
  27. }
  28. .space-around {
  29. justify-content: space-around;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="flex flex-start">
  35. <div>A</div><div>B</div><div>C</div><div>D</div>
  36. </div>
  37. <div class="flex flex-end">
  38. <div>A</div><div>B</div><div>C</div><div>D</div>
  39. </div>
  40. <div class="flex center">
  41. <div>A</div><div>B</div><div>C</div><div>D</div>
  42. </div>
  43. <div class="flex space-between">
  44. <div>A</div><div>B</div><div>C</div><div>D</div>
  45. </div>
  46. <div class="flex space-around">
  47. <div>A</div><div>B</div><div>C</div><div>D</div>
  48. </div>
  49. </body>
  50. </html>

5) align-items

align-items 属性用来设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式,属性的可选值如下:

描述
stretch 默认值,项目将被拉伸以适合容器
center 项目位于容器的中央
flex-start 项目位于容器的顶部
flex-end 项目位于容器的底部
baseline 项目与容器的基线对齐
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值

6) align-content

align-content 属性与 justify-content 属性类似,可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式,属性的可选值如下:

描述
stretch 默认值,将项目拉伸以占据剩余空间
center 项目在容器内居中排布
flex-start 项目在容器的顶部排列
flex-end 项目在容器的底部排列
space-between 多行项目均匀分布在容器中,其中第一行分布在容器的顶部,最后一行分布在容器的底部
space-around 多行项目均匀分布在容器中,并且每行的间距(包括离容器边缘的间距)都相等
initial 将此属性设置为属性的默认值
inherit 从父元素继承该属性的值

几个属性值的效果如下图所示:

3. 项目属性

1) order

order 属性用来设置项目在容器中出现的顺序,您可以通过具体的数值来定义项目在容器中的位置,属性的语法格式如下:

order: number;

其中 number 就是项目在容器中的位置,默认值为 0。

示例代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. .flex {
  6. display: flex;
  7. flex-flow: row wrap;
  8. margin-top: 10px;
  9. }
  10. .flex div {
  11. width: 60px;
  12. height: 60px;
  13. margin-bottom: 5px;
  14. border: 1px solid black;
  15. }
  16. .flex div:nth-child(1) {
  17. order: 5;
  18. }
  19. .flex div:nth-child(2) {
  20. order: 3;
  21. }
  22. .flex div:nth-child(3) {
  23. order: 1;
  24. }
  25. .flex div:nth-child(4) {
  26. order: 2;
  27. }
  28. .flex div:nth-child(5) {
  29. order: 4;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="flex">
  35. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  36. </div>
  37. </body>
  38. </html>

2) align-self

align-self 属性允许您为某个项目设置不同于其它项目的对齐方式,该属性可以覆盖 align-items 属性的值。align-self 属性的可选值如下:

描述
auto 默认值,表示元素将继承其父容器的 align-items 属性值,如果没有父容器,则为“stretch”
stretch 项目将被拉伸以适合容器
center 项目位于容器的中央
flex-start 项目位于容器的顶部
flex-end 项目位于容器的底部
baseline 项目与容器的基线对齐
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值

示例代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. .flex {
  6. display: flex;
  7. flex-flow: row wrap;
  8. align-items: flex-end;
  9. border: 1px solid #CCC;
  10. height: 150px;
  11. }
  12. .flex div {
  13. width: 60px;
  14. height: 60px;
  15. border: 1px solid black;
  16. }
  17. .flex div:nth-child(4) {
  18. align-self: flex-start;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="flex">
  24. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  25. </div>
  26. </body>
  27. </html>

3) flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写,语法格式如下:

flex: flex-grow flex-shrink flex-basis;

参数说明如下:

  • flex-grow:(必填参数)一个数字,用来设置项目相对于其他项目的增长量,默认值为 0;
  • flex-shrink:(选填参数)一个数字,用来设置项目相对于其他项目的收缩量,默认值为 1;
  • flex-basis:(选填参数)项目的长度,合法值为 auto(默认值,表示自动)、inherit(表示从父元素继承该属性的值) 或者以具体的值加 “%”、”px”、”em” 等单位的形式。

另外,flex 属性还有两个快捷值,分别为 auto(1 1 auto)和 none(0 0 auto)。

示例代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <style>
  5. .flex {
  6. display: flex;
  7. flex-flow: row wrap;
  8. align-items: flex-end;
  9. border: 1px solid #CCC;
  10. }
  11. .flex div {
  12. width: 60px;
  13. height: 60px;
  14. border: 1px solid black;
  15. }
  16. .flex div:nth-child(2) {
  17. flex:0;
  18. }
  19. .flex div:nth-child(4) {
  20. flex:1 1 auto;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="flex">
  26. <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
  27. </div>
  28. </body>
  29. </html>

另外,除了可以使用 flex 属性外,您也可以使用 flex-grow、flex-shrink、flex-basis 几个属性来分别设置项目的增长量、收缩量以及项目长度,例如:

  1. .flex div:nth-child(4) {
  2. flex-grow: 1;
  3. flex-shrink: 1;
  4. flex-basis: auto;
  5. /* 等同于 flex:1 1 auto; */
  6. }

CSS常用单位

1. 相对长度单位

相对长度单位指的是这个单位没有一个固定的值,它的值受到其它元素属性(例如浏览器窗口的大小、父级元素的大小)的影响,在响应式布局方面相对长度单位非常适用

单位 描述 示例
em 相对于自身 font-size(字体大小)属性的值,如果自身没有设置,则继承父元素 font-size 属性的值,1em 等同于 font-size 属性值,例如 font-size 的值为 16px,那么 1em 就等于 16px,2em 就等于 32px p{line-height:2em;}
rem 相对于根元素<html>的 font-size 属性的大小,比如根元素的 font-size 是 100px,那么 1.2rem 就相当于 120px p{font-size: 1.2rem;}
vw 相对于浏览器窗口的宽度,1vw = 窗口宽度的 1% p{font-size: 5vw;}
vh 相对于浏览器窗口的高度,1vh = 窗口高度的 1% p{font-size: 5vh;}
vmin vw 与 vh 中较小的值 p{font-size: 5vmin;}
vmax vw 与 vh 中较大的值 p{font-size: 5vmax;}
% 相对于父元素宽度或字体大小的百分比 div{width: 55%}

2. 绝对长度单位

绝对长度单位表示一个真实的物理尺寸,它的大小是固定的,不会因为其它元素尺寸的变化而变化。

单位 描述 示例
cm 厘米 p{font-size: 0.5cm;}
mm 毫米 p{font-size: 5mm;}
in 英寸(1in = 96px = 2.54cm) p{font-size: 1in;}
px 像素(1px = 1/96in) p{font-size: 16px;}
pt point,是一种专用的印刷单位“磅”,也可以称为“点”(1pt = 1/72in) p{font-size: 16pt;}
pc pica,中文可称为“派卡”,印刷行业用于描述字体大小的单位,相当于我国新四号铅字的尺寸(1pc = 12pt) p{font-size: 5pc;}

移动端布局方案

移动端布局需要适应不同尺寸的设备,单位用rem,html根元素的font-size大小按照设计稿的尺寸转成100px对应的vw。

  1. html{
  2. /*
  3. 100vw 750px 设计稿尺寸
  4. x 100px 换算为100px是多少vw
  5. */
  6. font-size: 13.33vw;
  7. }
  8. @media screen and (min-width:768px) {
  9. html{
  10. font-size: 100px;
  11. }
  12. }
  13. :root{
  14. --base-w: 13.33vw;
  15. }
  16. .box1{
  17. width: calc(var(--base-w) * 1.5);
  18. height: calc(var(--base-w) * 1.5);
  19. font-size: 0.16rem;
  20. border: 1px solid gray;
  21. }
0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3