CSS 弹性盒子flexbox和grid布局

最新推荐文章于 2024-06-15 14:18:12 发布

啊啊啊～～

最新推荐文章于 2024-06-15 14:18:12 发布

阅读量778

点赞数

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

本文链接：https://blog.csdn.net/qq_40891322/article/details/109098037

版权

css 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

flex

1 篇文章 0 订阅

订阅专栏

grid

1 篇文章 0 订阅

订阅专栏

一.弹性盒子flexbox

1.简介
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
2.组成
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
3.示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex</title>
</head>
<style>
    /* flex-direction的值有:
    row：横向从左到右排列（左对齐），默认的排列方式。
    row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
    column：纵向排列。
    column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。 */
    .flex-container {
        display: -webkit-flex;
        display: flex;
        /* -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse; */
        -webkit-justify-content: space-around;
        justify-content: space-around;
        -webkit-align-items: center;
        align-items: center;
        width: 800px;
        height: 500px;
        background-color: lightgrey;
        /* direction: rtl; */
    }
     
    .flex-item {
        background-color: cornflowerblue;
        width: 100px;
        /* height: 100px; */
        margin: 5px;
    }
    .item1{
        align-self: flex-start;
    }
    .item2{
        align-self: flex-end;
    }
    .item3{
        align-self: center;
    }
    .item4{
        align-self: stretch;
    }
    </style>
    </head>
    <body>
     
    <div class="flex-container">
      <div class="flex-item item1">flex item 1</div>
      <div class="flex-item item2">flex item 2</div>
      <div class="flex-item item3">flex item 3</div> 
      <div class="flex-item item4">flex item 4</div>
    </div>
    <!-- CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小
    以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一
    种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 -->  
    </body>
    </html>

在这里插入图片描述

4.属性及其取值
(https://www.cnblogs.com/dreamcc/p/10634218.html)
display ：指定 HTML 元素盒子类型。
flex-direction：指定了弹性容器中子元素的排列方式
justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap：设置弹性盒子的子元素超出父容器时是否换行。
align-content：修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow：flex-direction 和 flex-wrap 的简写
order：设置弹性盒子的子元素排列顺序。
align-self ：在弹性子元素上使用。覆盖容器的 align-items 属性。
flex：设置弹性盒子的子元素如何分配空间。
在这里插入图片描述

二.grid布局

1.网格线
网格线（Grid lines）可能是Grid布局规范中最重要的概念之一。网格线是用来在水平和垂直方向分割网格的线。水平方向的网格线是从左向右；垂直方向是从上往下。网格线的编号都是从1开始的。分为行网格线和列网格线，

在这里插入图片描述
2.网格区域（grid areas）
可以通过grid-row和grid-column构建出grid-area（也就是我们要说的网格区域）。通过网格线构建的网格区域，其有一个明确的顺序：grid-row-start / grid-column-start / grid-row-end / grid-column-end。如下面示例所示：
网格区域顺序：grid-row-start / grid-column-start / grid-row-end / grid-column-end

 grid-column: 2/span 2
 grid-row: 2/span 3;

  grid-area: 2 / 2 / 5 / 4;

两种表达方式一样的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid</title>
    <style>
        .grid-container{
            width: 800px;
            height: 600px;
            display: grid;
            grid-template-columns: repeat(4,1fr);
            grid-gap: 10px;
            background-color: coral;

        }
        .grid-item{
            background:cornflowerblue;
        }
        .item1{
            /* 其中第一个数字是列的起始网格线位置，第二个数字是列的结束网格线的位置。 */
            grid-column: 1/5;
        }
        .item2{
            /* 其中第一个数字是行的起始网格线位置，第二个数字是行的结束网格线的位置。 */
            grid-row: 2/5;
        }
        .item3{
            /* 网格区域顺序：grid-row-start / grid-column-start / grid-row-end / grid-column-end */
            /* 第一个数字是起始网格线的位置，关键词 span 后面紧跟一个数值，就是表示合并单元格的数量
            grid-column: 2/span 2;
            grid-row: 2/span 3; */
            /* 两种表达方式一样的效果 */
            grid-area: 2 / 2 / 5 / 4;
        }
        .item5{
            grid-row: 3/5;
            height: 50px;
            align-self: end;
        }
        .item6{
            grid-column: 1/5;            
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1"></div>
        <div class="grid-item item2"></div>
        <div class="grid-item item3"></div>
        <div class="grid-item item4"></div>
        <div class="grid-item item5"></div>
        <div class="grid-item item6"></div>
    </div>
</body>
</html>

在这里插入图片描述

3.网格合并 grid-template-areas
更妙的是，在CSS Grid布局中可以直接定义网格区域，用来放置对应的网格项目。CSS Grid布局有可以使用grid-template-areas属性来声明。然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。

<!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>
        .grid-container{
            /* 声明一个网格容器 */
            display: grid;
            width: 500px;
            height: 500px;
            /* 区域划分为三行三列 */
            grid-template-areas: "a b c"
                                 "d b e"
                                 "f f f";
            /* 定义三列网格,宽度比例为1:1:1 */
            grid-template-columns: repeat(3,1fr);
            /* 定义三行网格，高度比例为2:2:1 */
            grid-template-rows: 2fr 2fr 1fr;
            /* 定义网格线之间的间距 */
            grid-gap:5px;
            background-color: darkolivegreen;
        }
        .grid-item{
            background-color: darkgreen;
        }
        .item1{
            grid-area: a;

        }
        .item2{
            grid-area: b;

        }
        .item3{
            grid-area: c;

        }
        .item4{
            grid-area: d;

        }
        .item5{
            grid-area: e;

        }
        .item6{
            grid-area: f;

        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item item4">4</div>
        <div class="grid-item item5">5</div>
        <div class="grid-item item6">6</div>
    </div>
</body>
</html>

在这里插入图片描述

啊啊啊～～

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 弹性盒子flexbox和grid布局

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

扫一扫