CSS3中的弹性盒子(Flex Box)和弹性布局

最新推荐文章于 2023-07-10 10:20:35 发布

XUPT-前端在逃工程师

最新推荐文章于 2023-07-10 10:20:35 发布

阅读量1.8k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/Dimuzero/article/details/109779724

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS3 弹性盒子(Flex Box)

一. 介绍

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

display:flex | inline-flex；
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

二. flex 属性

1. flex 属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex: number ;

在这里插入图片描述

<style>
	/*第一个盒子占2/4空间*/
	.flex1{
		flex:2;
	}
	/*第二个盒子占1/4空间*/
	.flex2{
		flex:1;
	}
	/*第三个盒子占1/4空间*/
	.flex3{
		flex:1;
	}
</style>

2. flex-direction

属性指定了弹性子元素在父容器中的位置,设置当前元素里面子元素的模式
(按行排，按列排)

row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

2.1 column 列排

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex-container {
            display: -webkit-flex;
            display: flex;
            
            /*控制子元素排序方法（按列排）*/
            -webkit-flex-direction: column;
            flex-direction: column;
            
            width: 400px;
            height: 250px;
            background-color: lightgrey;
        }

    .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>
</body>
</html>

2.2 row 行排

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex-container {
            display: -webkit-flex;
            display: flex;
            
            /*控制子元素排序方法（按行排）*/
            -webkit-flex-direction: row;
            flex-direction: row;
            
            width: 400px;
            height: 250px;
            background-color: lightgrey;
        }

    .flex-item {
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">flex item 1</div>
        <div class="flex-item">flex item 2</div>
        <div class="flex-item">flex item 3</div>
    </div>
</body>
</html>

3. justify-content 属性

内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐。
控制子元素在y轴对齐方式（写给父元素弹性盒子）

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。

flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。

center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。

space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

在这里插入图片描述

4. align-items 属性

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
控制子元素在x轴对齐方式（写给父元素弹性盒子）

align-items: flex-start | flex-end | center | baseline | stretch

flex-start：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

stretch：
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
在这里插入图片描述

5. align-content 和 flex-wrap 属性

两个属性配合使用

4.1 align-content

修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

4.2 flex-wrap

属性用于指定弹性盒子的子元素换行方式。

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

nowrap - 默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。

6. align-self属性

用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。（写给弹性子元素）

auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
在这里插入图片描述

7.px、em、rem区别介绍

7.1 PX

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特点

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

7.2 EM

EM特点

em的值并不是固定的；
em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

body选择器中声明Font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

7.3 REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}
注意：选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

7.4 px 与 rem 的选择

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

移动端网站一般用rem

XUPT-前端在逃工程师

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的弹性盒子(Flex Box)和弹性布局

CSS3 弹性盒子(Flex Box)一. 介绍弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。display:flex | inline-flex；弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设
复制链接

扫一扫