弹性盒模型

最新推荐文章于 2023-02-22 16:20:53 发布

鱼还在鱼塘里

最新推荐文章于 2023-02-22 16:20:53 发布

阅读量111

点赞数

分类专栏：笔记文章标签： css html flex

原文链接：https://www.imooc.com/code/21417

版权

笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

flex属性

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 技术点的解释：
			
			1、设置display: flex属性可以把块级元素在一排显示。
			
			2、flex需要添加在父元素上，改变子元素的排列顺序。
			
			3、默认为从左往右依次排列,且和父元素左边没有间隙。 */
			.box{
				height:400px;
				background:skyblue;
				display:flex;
			}
			.box1{
				width: 200px;
				height: 200px;
				background: red;
			}
			.box2{
				width: 200px;
				height: 200px;
				background: orange;
			}
			.box3{
				width: 200px;
				height: 200px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>

上面的代码：

三个块元素设置大小以及背景色，在父容器中添加flex。

技术点的解释：

1、设置display: flex属性可以把块级元素在一排显示。

2、flex需要添加在父元素上，改变子元素的排列顺序。

3、默认为从左往右依次排列,且和父元素左边没有间隙。

使用justify-content属性设置横轴排列方式

本属性定义了项目在主轴上的对齐方式。结合上一节的布局例子进行理解，属性值分别为：

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

flex-start：交叉轴的起点对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-start;
    }

在这里插入图片描述
flex-end：右对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-end;
    }

在这里插入图片描述
center： 居中

.box {
        background: blue;
        display: flex;
        justify-content: center;
    }

在这里插入图片描述
space-between：两端对齐，项目之间的间隔都相等。

 .box {
        background: blue;
        display: flex;
        justify-content: space-between;
    }

在这里插入图片描述
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

.box {
        background: blue;
        display: flex;
        justify-content: space-around;
    }

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>justify-content</title>
    <style type="text/css">
    .box {
        background: blue;
        display:flex;
        justify-content:space-around;
    }

    .box div {

        width: 200px;
        height: 200px;
    }

    .box1 {
        background: red;
    }

    .box2 {
        background: orange;
    }

    .box3 {
        background: green;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

使用align-items属性设置纵轴排列方式

本属性定义了项目在交叉轴上的对齐方式。属性值分别为：

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

结合右侧编辑器中的布局以及下面的样式设置进行理解：
flex-start：默认值，左对齐

   .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-start;
    }

在这里插入图片描述
flex-end：交叉轴的终点对齐

 .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-end;
    }

在这里插入图片描述
center：交叉轴的中点对齐

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: center;
    }

在这里插入图片描述
baseline：项目的第一行文字的基线对齐。

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: baseline;
    }

三个盒子中设置不同的字体大小，可以参考右侧编辑器中的代码进行测试。

在这里插入图片描述
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 .box {
        height: 300px;
        background: blue;
        display: flex;
        align-items: stretch;
    }

    .box div {
        /*不设置高度，元素在垂直方向上铺满父容器*/
        width: 200px;
    }

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>justify-content</title>
    <style type="text/css">
    .box {
		height: 500px;
        background: blue;
        display:flex;
        align-items: flex-end;
    }

    .box div {

        width: 200px;
        height: 200px;
    }

    .box1 {
        background: red;
    }

    .box2 {
		font-size: 20px;
        background: orange;
    }

    .box3 {
		font-size: 30px;
        background: green;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">123</div>
        <div class="box2">123</div>
        <div class="box3">123</div>
    </div>
</body>
</html>

给子元素设置flex占比

技术点的解释：

1、给子元素设置flex属性,可以设置子元素相对于父元素的占比。

2、flex属性的值只能是正整数,表示占比多少。

3、给子元素设置了flex之后,其宽度属性会失效。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>flex占比</title>
    <style type="text/css">
    .box {
        height: 300px;
        background: blue;
        display: flex;
    }

    .box div {
        width: 200px;
        height: 200px;
    }

    .box1 {
        flex: 1;
        background: red;
    }

    .box2 {
        flex: 1;
        background: orange;
    }

    .box3 {
        flex: 1;
        background: green;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1">flex:1</div>
        <div class="box2">flex:3</div>
        <div class="box3">flex:2</div>
    </div>
</body>

</html>

鱼还在鱼塘里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性盒模型

flex属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /* 技术点的解释： 1、设置display: flex属性可以把块级元素在一排显示。 2、flex需要添加在父元素上，改变子元素的排列顺序。 3、默认为从左往右依次排列,且和父元素左边没有间隙。
复制链接

扫一扫