【CSS基础知识】flex布局、table 布局 和 grid布局

已于 2024-09-06 21:20:19 修改
阅读量1k 收藏 6
点赞数 1
分类专栏： 面试题CSS 文章标签： css3
于 2023-09-07 20:18:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63681863/article/details/132742742
版权

一、flex布局

参考文章

1.1 flex介绍

display:flex 或 display:inline-flex 声明为弹性容器

flex-wrap换行

justify-content

在这里插入图片描述

align-items

在这里插入图片描述

align-content多行对齐

子元素在交叉轴上的对齐方式
在这里插入图片描述

自我对齐 align-self (作用在子级元素

相当于覆盖父级的align-items
在这里插入图片描述

flex-grow

在容器主轴上存在剩余空间时, flex-grow才有意义
定义的是可放大的能力，0 （默认）禁止放大，大于 0 时按占的比重分放大，负数无效

flex-shrink

在这里插入图片描述###

1.2 flex布局实战

实现盒子3等分

在这里插入图片描述

<template>
  <div class="father">
    <div class="son1">Son111</div>
    <div class="son2">Son222</div>
    <div class="son3">Son333</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    display: flex;
    height: 200px;
    border: 1px solid red;
    .son1 {

      flex: 1;
      background-color: purple;
    }
    .son2 {
      flex: 1;
      background-color: green;
    }
    .son3 {
      flex: 1;
      background-color: skyblue;
    }
  }
</style>

实现盒子2等分

同上

3栏布局，中间自适应

<template>
  <div class="father">
    <div class="son1">Son111</div>
    <div class="son2">Son222</div>
    <div class="son3">Son333</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --son1-width: 50px;
    --son3-width: 150px;

    display: flex;
    height: 200px;
    border: 1px solid red;
    .son1 {

      width: var(--son1-width);
      background-color: purple;
    }
    .son2 {
      flex: 1;
      background-color: green;
    }
    .son3 {
      width: var(--son3-width);
      background-color: skyblue;
    }
  }
</style>

2栏布局，右侧自适应

<template>
  <div class="father">
    <div class="son1">Son111</div>
    <div class="son2">Son222</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --son1-width: 50px;
    --son3-width: 150px;

    display: flex;
    height: 200px;
    border: 1px solid red;
    .son1 {

      width: var(--son1-width);
      background-color: purple;
    }
    .son2 {
      flex: 1;
      background-color: green;
    }
  }
</style>

水平垂直居中

在这里插入图片描述

<template>
  <div class="father">
    <div class="son1">Son111</div>
  </div>
</template>

<script setup></script>
<style lang="scss" scoped>
  .father {
    --son1-width: 50px;
    --son3-width: 150px;

    display: flex;
    align-items: center; 
    justify-content: center;
    height: 200px;
    border: 1px solid red;
    .son1 {
      width: var(--son1-width);
      height: 50px;
      background-color: purple;
    }
  }
</style>

二、table布局

实现盒子3等分

table布局默认就是等分的
在这里插入图片描述

 <style >
    .father{
        width: 600px;
        height: 200px;
        
        /* display: table-row;不行，是行内元素了 */
        display: table;
        background-color: #db7b7b;
    }
    .inner{
        display: table-cell;
    }
  </style>
<body>
    <div class="father"> 
        <div class="inner" style="background-color: #677e80;"> A </div>
        <div class="inner" style="background-color: #7bdb8d;"> B </div>
        <div class="inner" style="background-color: #d3c3c3;"> C </div>
    </div>
 
</body>

实现盒子2等分

同上

三栏布局，中间自适应

在这里插入图片描述

<style >
    .father{
        width: 100%;
        height: 200px;
        
        /* display: table-row;不行，是行内元素了 */
        display: table;
        background-color: #db7b7b;
    }
    .inner{
        display: table-cell;
    }
    .inner1{
        width: 100px;
    }
    .inner2{
        
    }
    .inner3{
        width: 50px;
    }
  </style>
<body>
    <div class="father"> 
        <div class="inner inner1" style="background-color: #677e80;"> A </div>
        <div class="inner"        style="background-color: #7bdb8d;"> B </div>
        <div class="inner inner3" style="background-color: #d3c3c3;"> C </div>
    </div>
 
</body>

两栏布局，右侧自适应

同上

水平垂直居中

<style >
    .father{
        width: 600px;
        height: 200px;

        display: table-cell;
        text-align: center;
        vertical-align: middle;

        background-color: #db7b7b;
    }
    .son{
        display: inline-block;
    }
   
  </style>
<body>
    <div class="father"> 
        <div class="son" style="background-color: #677e80;"> A </div>
        
    </div>

</body>

三、grid布局

大佬文章-超详细！！

3.1 grid布局介绍

号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。

与flex布局的区别

flex是一维布局，一次只能处理一个维度上的元素布局，一行或者一列。
而grid是二维布局，一次只能处理一个维度上的元素布局，一行或者一列。
在这里插入图片描述

创建Grid布局

display：grid 该容器是一个块级元素
display：inline-grid 该容器是一个行内块元素

设置行高、列宽

grid-template-rows 设置网格的行高
grid-template-columns 定义列宽

1. 固定列宽和行高

grid-template-columns: 200px 100px 200px;设置3列，列宽分别是200 、100、200
grid-template-rows: repeat(2, 50px);等价于 grid-template-rows: repeat(2, 50px);

2. 设置份数

grid-template-columns: 200px 1fr 2fr;
在这里插入图片描述

grid-template-columns: 1fr 2fr 3fr;
在这里插入图片描述

3. auto

grid-template-columns: 100px auto 100px;第一第三列为 100px，中间由浏览器决定长度

布局

justify-content 属性、align-content 属性 place-content

justify-content 属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）。它们都有如下的属性值。
place-content属性是align-content属性和justify-content属性的合并简写形式。如果省略第二个值，浏览器就会假定第二个值等于第一个值。

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
  • space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
  • space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔
  • space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
  • stretch - 项目大小没有指定时，拉伸占据整个网格容器

在这里插入图片描述

justify-items 属性、align-items 和 place-items

justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）
place-items属性是align-items属性和justify-items属性的合并简写形式。如果省略第二个值，则浏览器认为与第一个值相等。

.container {
  justify-items: start | end | center | stretch （默认;
  align-items: start | end | center | stretch （默认;
}

在这里插入图片描述

justify-self 属性、align-self 属性 place-self

justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目，所以属性要写在子级元素上

align-self 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目
两者很相像，这里只拿 justify-self 属性演示，align-self 属性同理，只是作用于垂直方向
在这里插入图片描述

基本代码

<template>
  <div class="wrapper">
    <div class="one item">One</div>
    <div class="two item">Two</div>
    <div class="three item">Three</div>
    <div class="four item">Four</div>
    <div class="five item">Five</div>
    <div class="six item">Six</div>
  </div>
</template>
<style lang="scss" scoped>
  .wrapper {
    display: grid;
    grid-template-rows: 100px 200px;
    grid-template-columns: 50px 100px 200px;
    grid-gap: 20px;
    width: 800px;
    border: 1px solid red;
  }
  .one {
    background: #19caad;
  }
  .two {
    background: #8cc7b5;
  }
  .three {
    background: #d1ba74;
  }
  .four {
    background: #bee7e9;
  }
  .five {
    background: #e6ceac;
  }
  .six {
    background: #ecad9e;
  }
  .item {
    color: #ffffff;
  }
</style>

效果：
在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述

3.2 grid布局实战

实现盒子3等分

 <style >
    .father{
        width: 600px;
        height: 200px;

        display: grid;

        /* 这三个都行 */
        /* grid-template-columns:  repeat(3,33.3%)  ; */
        grid-template-columns: repeat(3,200px);
        /* grid-template-columns: 1fr 1fr 1fr; */
        /* grid-template-columns: repeat(3, 1fr); */
        background-color: #db7b7b;
    }
    
   
  </style>
<body>
    <div class="father"> 
        <div class="inner inner1" style="background-color: #677e80;"> A </div>
        <div class="inner inner2" style="background-color: #7bdb8d;"> B </div>
        <div class="inner inner2" style="background-color: #dbc07b;"> C </div>
    </div>

</body>

实现盒子2等分

同上

三栏布局，中间自适应

在这里插入图片描述

 <style >
    .father{
        width: 600px;
        height: 200px;

        display: grid;
       
        grid-template-columns: 100px auto 50px;
      
        background-color: #db7b7b;
    }
    
   
  </style>
<body>
    <div class="father"> 
        <div class="inner inner1" style="background-color: #677e80;"> A </div>
        <div class="inner inner2" style="background-color: #7bdb8d;"> B </div>
        <div class="inner inner2" style="background-color: #dbc07b;"> C </div>
    </div>

</body>

两栏布局，右侧自适应

同上

水平垂直居中

在这里插入图片描述

<style >
    .father{
        width: 600px;
        height: 200px;

        display: grid;
        place-items: center;
			// 相当于align-items: center;和   justify-items: center;
  
        background-color: #db7b7b;
    }
    
   
  </style>
<body>
    <div class="father"> 
        <div class="son" style="background-color: #677e80;"> A </div>
    </div>

</body>
珊珊而川
关注
专栏目录
display属性和flex grid布局
Berg_liu的博客
11-07 1427
Display属性表 Flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫...
推荐使用：Flex Table - 动态灵活的表格解决方案
gitblog_00021的博客
06-02 418
推荐使用：Flex Table - 动态灵活的表格解决方案 flex-table-cardHighly Flexible Lovelace Card - arbitrary contents/columns/rows, regex matched, perfect to show appdaemon created content and anything breaking out of the...
Flex弹性盒子布局和Grid网格布局详解
最新发布
qq_41765777的博客
08-16 1257
Flex布局（Flexible Box Layout，也称为弹性盒布局）是CSS3中的一种布局模式，旨在让容器能够自动调整其子元素的大小、顺序和对齐方式，以更好地适应不同设备和屏幕尺寸。它的核心理念是“弹性”，即容器中的元素可以根据可用空间进行伸缩。
css grid布局和flex布局是什么?
xiaowu2022的博客
12-29 440
在css中，grid布局指的是“网格布局”，是一个二维系统，可以同时处理行和列，可以通过将css规则用于父元素和该元素的子元素来使用网格布局；而flex布局指的是“弹性布局”，是一个一维系统，用来为盒状模型提供最大的灵活性。 （推荐教程：CSS视频教程） 一、flex布局简介 flex是flexible box（弹性布局）的简介，是一个一维系统，用来为盒状模型提供最大的灵活性。 使用：任何容器（行内元素可设置为display:inline-block）; 特点：空间分布在行中进行，而非整体 二、grid布局
CSS的Grid布局与Flex布局
日常笔记/总结/系列知识梳理
11-09 1092
Grid布局是一种CSS布局模式，它使用一个二维的网格系统来定位元素。它允许您将容器分为行和列，然后将元素放置在特定的行和列中。Grid布局非常适合创建复杂的网页布局和对齐元素。 Flex布局是Flexible Box的缩写，称为弹性盒布局，是一种用于为盒状模型提供最大灵活性的布局方式。任何容器都可以被指定为Flex布局，而行内元素也可以使用Flex布局。
CSS中的Flex布局
热门推荐
zheshiyangyang的博客
05-21 1万+
Flexflex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)flex-flow：子元素的排列方式和换行方式的简写justify-content：子元素的水平对齐方式align-items：子元素的垂直对齐方式align-content：设置多个元素组成的整块的对齐方式order：按照数字大小设置各个元素之间的排列方式flex-grow：按照权重分配剩余空间进行等比例放大。
CSS布局——Flex布局和Grid布局
kaisersama__的博客
06-19 715
在上面的代码中，.container是Flex容器，通过设置将其定义为Flex容器，并使用和属性将Flex项目在主轴和交叉轴上居中排布。.item是Flex项目，通过设置flex: 1;实现项目的灵活伸缩，并设置margin属性实现项目之间的间距。
CSS拓展——Flex布局和Grid网络布局
qq_52957637的博客
08-01 1797
CSS拓展——Flex布局和Grid网络布局
CSS布局模式之Flex布局&Grid布局
你若盛开，清风自来
06-11 683
CSS布局（Cascading Style Sheets layout）指的是通过使用CSS样式来控制网页中元素的布局方式。在网页设计中，布局是非常重要的一个方面，因为它决定了网页中内容的呈现方式，对网页的可读性、可用性和美观性都有着重要的影响。在CSS的发展过程中，出现了许多不同的布局方案，其中Flex布局和Grid布局是最常用的两种布局方式。通过使用CSS布局，开发者可以通过少量的代码来快速而有效地实现自己所需要的布局效果。Flex布局是一种基于CSS3的新的布局方式，它可以方便地实现。
Flex布局及Grid布局
obj_obj_baby的博客
07-06 5730
Flex与Grid布局
CSS flex布局
Glichi的博客
07-12 624
任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用flex布局 .box{ display: inline-flex; } webkit内核的浏览器必须加上前缀-webkit .box{ display: -webkit-flex; /* Safari */ display: flex; } ++设置flex...
【CSS】常用flex布局和grid布局
JackCao_Grass的博客
04-12 433
【CSS】常用flex布局和grid布局
了解flex布局和grid布局
qq_41367352的博客
07-11 1207
Flexible Box 模型，通常被称为 flexbox（弹性布局），是一种一维的布局模型。//块级元素//行内元素flex布局支持6个容器属性：属性网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。//块级元素//行内元素。
【前端知识之CSS】flex弹性布局和grid网格布局
weixin_44337386的博客
05-12 2229
本系列主要整理前端面试中需要掌握的知识点。本节介绍flex弹性布局和grid网格布局。
CSS flex布局
meteorshower2013的博客
07-10 259
学习参考 微信小程序开发指南： https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a 阮一峰博客： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuic...
css flex布局
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
11-25 343
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 .box............
Css-flex 布局
阑珊伊人
05-05 771
Flex(Flexible Box)布局意为”弹性布局”,是CSS3最受欢迎的属性之一，简洁、快速，为盒状模型提供了最大的灵活性。 但是在使用该属性过程中，我们需要注意两点： Flex属性在webkit内核的浏览器中使用时，必须加上-webkit-前缀。 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 容器的属性 Flex具有以下六种容器属性。 ...
CSS Flex布局
c3H56的博客
02-21 114
经过这一段时间的学习，我发现flex布局是我目前的薄弱之处，也是相对重要的部分。 首先，先是了解概念： 基本概念：采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。这三条轴分别为水平主轴（main axis） 垂直交叉轴（cross axis）和项目默认沿主轴排列。 定义及其作用： Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的
Css中，display属性值flex（弹性布局）、grid（网格布局）
害。代码嘛，可不就是敲着玩！
10-11 3514
display为flex，用来定义一个容器元素为一个弹性容器（flexcontainer），即其子元素（flexitems）也成为弹性项目（flexitems），从而实现弹性布局。设置display为flex时，还可相应设置子元素的一些样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值