CSS的弹性布局

CSS的弹性布局

弹性布局的介绍

弹性布局的英文是flexbox,简写flex。
弹性布局又称伸缩盒布局。弹性布局有容器、元素两大要素,元素可以随着容器大小的变化,自动改变大小,但是元素之间会按照一定的比例排布,使页面整洁,让人看起来舒服。
实现弹性布局的代码:display:flex;

弹性布局的常用语句

1.在主轴方向的排列方式——justify-content
默认是x轴。通常我们实现x轴的排列用这个语句。
:flex-start:元素在x轴上靠左开始排列。
:flex-end:元素在x轴上靠右开始排列。
:center:元素在x轴上居中排列。
:space-between:元素之间会有空白间隔开了。
:space-around:元素左右都会出现空白间隔开了,相当于有空白将元素包围起来了。
:flex-evenly:元素之间以及元素与容器之间的左右间距相等。

  • 案例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
    <style>
        .parent{
            height: 300px;
            border:1px solid blueviolet;
            display: flex;
            justify-content: flex-start;
        }
        .child{
            width: 200px;
            height: 200px;
            border: 1px solid lawngreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
</body>
</html>

flex-start的效果图:
在这里插入图片描述flex-end的效果图:
在这里插入图片描述center的效果图:
在这里插入图片描述space-between的效果图:
在这里插入图片描述space-around的效果图:
在这里插入图片描述space-evenly的效果图:
在这里插入图片描述2.交叉轴的对齐方式:align-items
默认是y轴。通常实现垂直排列。
:flex-start:在y轴上元素靠顶排列。
:flex-end:在y轴上元素靠底排列。
:center:在y轴上元素居中排列。
:baseline:称为基线对齐,每个元素中的内容会水平对齐。
:stretch:称为拉伸,在元素没有设置高度的时候,可以通过这个代码将元素拉伸,和容器一样高。

  • 案例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
    <style>
        .parent{
            height: 300px;
            border:1px solid blueviolet;
            display: flex;
            align-items: flex-start;
        }
        .child{
            width: 200px;
            height: 200px;
            border: 1px solid lawngreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
    </div>
</body>
</html>

flex-start的效果图:
在这里插入图片描述flex-end的效果图:
在这里插入图片描述center的效果图:
在这里插入图片描述baseline的效果图:
需增加代码:是第二个孩子的内边距为20px。

.child:nth-child(2){
            padding-top: 20px;
        }

在这里插入图片描述stretch的效果图:
在执行此效果之前,需要注释掉孩子的高度。
在这里插入图片描述3.子元素的x轴与y轴的交换排列

  • 案例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局</title>
    <style>
        .parent{
            height: 300px;
            border:2px solid blueviolet;
            display: flex;
            flex-direction: row;
        }
        .child{
            width: 200px;
            height: 200px;
            border: 2px solid lawngreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
    </div>
</body>
</html>

行排列:也就是列布局。flex-direction:column;
在这里插入图片描述

倒叙列布局:flex-direction:column-reverse;
在这里插入图片描述

列排列:也就是行布局。flex-direction:row;
在这里插入图片描述

倒叙行布局:flex-direction:row-reverse;
在这里插入图片描述换行:flex-wrap:wrap;
如果有设置子元素的固定宽高,在希望子元素不被父元素挤的情况下,可以执行换行。

  • 案例代码:根据上面代码只需改变style
<style>
        .parent{
            height: 250px;
            border:2px solid blueviolet;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .child{
            width: 200px;
            height: 100px;
            border: 2px solid lawngreen;
        }
    </style>

效果图4.多主轴:align-content

  • 案例代码
<style>
        .parent{
            height: 250px;
            border:2px solid blueviolet;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .child{
            width: 200px;
            height: 100px;
            border: 2px solid lawngreen;
        }
    </style>

:flex-start:在y轴上子元素靠顶。
在这里插入图片描述:flex-end:在y轴上子元素靠底。
在这里插入图片描述center:上下居中。
在这里插入图片描述:sapce-between:子元素之间会有间隔,但子元素和父元素之间没有间隔。
在这里插入图片描述:space-around:子元素之间有间隔,而子元素和父元素之间也有间隔了。
在这里插入图片描述

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值