关于前端布局的小技巧-多栏布局（column-count），盒布局，flex布局--这可是我做的最长的文章了！

最新推荐文章于 2024-06-21 16:42:16 发布
最新推荐文章于 2024-06-21 16:42:16 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： 前端 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49527298/article/details/110392475
版权

HTML的布局方式多的不能再多了，而博主我最近也是学了几种简单的，这不，就来分享一些了！

多栏式布局
盒布局
弹性布局
排列方式，空间的分配
justify-content属性
align-self
align-content

多栏式布局

1.为什么需要？
在我们日常布局中，会经常使用浮动和定位进行布局，就会出现两个元素不能底部对齐的情况。
2.案例介绍。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 <body>
     <div class="a">
        <p>111111111111111111
            1111111111111111111111111
            11111111111111111111111111111111
            111111111111111111111111111
            11111111111111111111111111
            11111111111111111111111111111111
            1111111111111111
            1111111111111111
            1111111111111111
            1111111111111111
            1111111111111111
            111111111111111111111111111111111111111111
            11111111111111111111111111111111
            1111111111111111
            1111111111111111
            1111111111111111
            1111111111111111
            1111111111111111
            1111111111111111
            
        </p>
            <p>222222222222222222222222
                222222222222222222222222
                222222222222222222222222
                222222222222222222222222
                222222222222222222222222
            </p>
    </div>
    <div class="b">
        saddqwdasds
    </div> 
</body>
<style>
     .a{
       
        column-count: 2;
        -webkit-column-count: 2;  
        /* 2栏 */
        column-width: 40em;
        /* 每一栏的宽度   */
        column-gap: 100px;
        /* 间隔距离 */
        column-rule: 1px solid red;
        /* 间隔线 */
      }
    .b{
        width: 100%;
        background-color: rebeccapurple;
        height: 100px;
    }
</style>
</html>

盒布局

1.为什么需要？
当使用浮动时，左右栏之间不能对齐。
2.案例介绍。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="first">
        <div class="left">
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
        </div>
        <div class="lr">
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
        </div>
        <div class="right">
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
            <a href="#">asdasdas</a>
        </div>
    </div>
</body>
<style>
    
    .first{
        display: -webkit-box;
        /* 盒布局 */
    }
    .left{
        /* float: left; */
        width: 30%;
        background-color: skyblue;
        box-sizing: border-box;
        
    }
    .lr{
        /* float: left; */
        width: 30%;
        background-color: slategray;
        box-sizing: border-box;
    }
    .right{
        /* float: left; */
        width: 30%;
        box-sizing: border-box;
        background-color: tan;
    }
</style>
</html>

弹性布局

在这里插入图片描述

1.为什么需要？
flex布局能够改变元素的排列方式和排列顺序，
2.方法和属性的介绍。
order:改变元素顺序

<div class="box">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</div>
<style>
    .box{
        display: flex;
    }
    .a{
        width: 200px;
        height: 100px;
        background-color: red;
        order: 3;
    }
    .b{
        width: 200px;
        height: 100px;
        background-color: hotpink;
        order: 2;
    }
    .c{
        order: 1;
        width: 200px;
        height: 100px;
        background-color: gainsboro;
    }
</style>

排列方式，空间的分配 

<div class="box">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</div>
<style>
    .box{
        display: flex;
        width: 800px;
        height: 100px;

        /* flex-direction: column; */
        /* 纵向排列 */
        /* flex-direction: row; */
        /* 横向排列 */
        /* flex-direction: column-reverse; */
        /* 纵向反向排列 */
        /* flex-direction: row-reverse; */
        /* 横向反向排列 */
    }
    .a{
        width: 200px;
        height: 100px;
        background-color: red;
        order: 3;
        /* 排列顺序 */
        /* flex: 1; */
        /* 将空白的区域分成3份，一个div一份，（就等于自己加上另外一份的，就等于它的高度或者宽度） */
        flex-grow: 2;
        /* 计算方式：父元素-子元素的总和，一份flex-grow的总数=（父元素-子元素的总和）除以flex-grow的总数，子元素=自身+2份的flex-grow */
        flex-shrink: 1;
        /* 当子元素的宽度总和大于父元素时，可以用flex-shrink属性去调整。计算方式：子元素总和-父元素，再求出每一份flex-shrink的大小，子元素的宽度=自身-自己所占的flex-shrink的份数的大小 */
    }
    .b{
        width: 200px;
        height: 100px;
        background-color: hotpink;
        order: 2;
                /* 排列顺序 */
        /* flex: 1; */
        /* 将空白的区域分成3份，一个div一份，（就等于自己加上另外一份的，就等于它的高度或者宽度） */
        flex-grow: 1;
        /* 计算方式：父元素-子元素的总和，一份flex-grow的总数=（父元素-子元素的总和）除以flex-grow的总数，子元素=自身+2份的flex-grow */
        flex-shrink: 1;
        /* 当子元素的宽度总和大于父元素时，可以用flex-shrink属性去调整。计算方式：子元素总和-父元素，再求出每一份flex-shrink的大小，子元素的宽度=自身-自己所占的flex-shrink的份数的大小 */
    }
    .c{
        order: 1;
                /* 排列顺序 */
        width: 200px;
        height: 100px;
        background-color: gainsboro;
        /* flex: 1; */
        /* 将空白的区域分成3份，一个div一份，（就等于自己加上另外一份的，就等于它的高度或者宽度） */
        flex-grow: 1;
        /* 计算方式：父元素-子元素的总和，一份flex-grow的总数=（父元素-子元素的总和）除以flex-grow的总数，子元素=自身+2份的flex-grow */
        flex-shrink: 1;
        /* 当子元素的宽度总和大于父元素时，可以用flex-shrink属性去调整。计算方式：子元素总和-父元素，再求出每一份flex-shrink的大小，子元素的宽度=自身-自己所占的flex-shrink的份数的大小 */
    }
</style>

justify-content属性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
    <div class="first"></div>
    <div class="second"></div>
    <div class="three"></div>
</div>
</body>
<style>
    .box{
        display: flex;

        /* justify-content: space-between; */
        /* 两端靠边，中间一只 */
        /* justify-content: space-around; */
        /* 两端留有一样的边距，中间的元素和两端元素都有一样的边距 */
        /* justify-content: flex-end; */
        /* 靠最右边 */
        /* justify-content: flex-start; */
        /* 靠最左边 */
        justify-content: center;
        /* 居中 */
    }
    .first{
        width: 200px;
        height: 100px;
        background-color: red;
    }
    .second{
        width: 200px;
        height: 100px;
        background-color: gold;
    }
    .three{
        width: 200px;
        height: 100px;
        background-color: green;
    }
</style>
</html>

space-between
在这里插入图片描述
space-around
在这里插入图片描述
start
在这里插入图片描述
end
在这里插入图片描述
center
在这里插入图片描述

align-items:指定的是交叉轴方向（横向布局时交叉轴方向为垂直方向，纵向布局时交叉轴方向为水平方向）

在这里插入图片描述

flex-start（向顶部对齐）
flex-end（向下对齐）
center（上下居中）
baseline（如果子元素和容器的布局方式不是一个方向，则该作用相当于flex-start，如果是一个方向，则子元素沿基线对齐）
stretch（如果子元素没有指定高度，则子元素的高度相当于）

align-self：用于单独设定元素的对齐方式

align-self和align-items的属性相同，所以这里不多介绍了。

align-content：用于指定多行布局的对齐方式

align-content和align-items的属性相同，所以这里不多介绍了。
在这里插入图片描述

坎坷的程序员
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
column分栏布局只是文字布局吗_「一劳永逸」48张小图带你领略flex布局之美
weixin_36436373的博客
12-30 143
前言最近在项目中，遇到布局问题，有时候，需要堆叠很多的样式，去排版，一定程度上增加了代码量，那么有没有更加方便的布局方式呢？ 48张图带你从0到1掌握flex布局方式。flex布局在某种程度上，简便我们布局的一个难题，接下来的篇幅将介绍它的使用 flex基本概念 要想熟练掌握flex布局的话，你需要理解两个概念：轴和容器 从上面图来看，我们将flex布局分为两部分讲，轴和容器。轴主轴（mian ...
微信小程序通过js实现瀑布流布局详解
12-08
前言 瀑布流 – 小程序中数据列表或者图片展示难免高度不一，而我们一般固定宽度，让其高度自适应，并无缝对接。如下图： 瀑布流的两种做法： css: 在父元素上使用column-count: 2也可以做到两列排版。但column-count: 2是左右两列排版，如果碰巧出现左边累计高度过多大于右边累计高度的话，右边会出现大片空白区域。点击前往 js(推荐): 判断左右两边的累计高度，那边的高度小，便往那边添加（需要动态获取节点元素的高度进行计算）。下面用的就是此种方法： 准备工作 我们需要用到 await ，而使用 await 需要在本地配置中开启增强编译。如下图： 实现代码
column-count瀑布流实现左右顺序
weixin_54526836的博客
08-26 3015
类似瀑布流布局，解决column-count底部高度问题，解决列第一个留白问题，瀑布流左1右2分布样式
当flex-direction: column时,设置flex:1不生效解决办法
最新发布
bamboozjy的博客
06-21 523
当flex-direction: column时,设置flex:1不生效解决办法
CSS布局
weixin_47267618的博客
05-03 1134
布局 文档流 就是按照元素的顺序从左到右从上到下排列 如果有块级标签，块级会占据一正行 在img中加一个块级元素div 定位 默认的文档流许多时候无法满足我们的需求，需要更多地布局手段 用到定位:默认定位 static 相对定位 relative 绝对定位 absolute 固定定位 fixed 默认定位 static 无定位，不受left right top bottom的影响，元素出现在正常 的文档流中 相对定位 relative 可以看出div2是相对原有位置进行left、righ
CSS盒模型详解
weixin_45734909的博客
08-06 801
改文章主要记录盒模型内容，其中弹性盒子和怪异盒子是本篇笔记的重点
【CSS3】多列布局——column-count
O(∩_∩)O
02-25 1847
column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则： column-count：auto | 取值说明： 属性值 属性值说明 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 此值为正整数
css-tricks:一些技巧主要基于CSS3
06-13
通过`column-count`、`column-gap`、`column-width`等属性可以控制列的数量、间距和宽度。 3. **边框与背景**：CSS3引入了圆角边框`border-radius`，渐变背景`linear-gradient`和`radial-gradient`，以及盒阴影`box...
Css布局
02-26
除此之外，CSS还引入了新的布局概念，如多列布局（`column-count`、`column-gap`等）和Flexbox与Grid的组合使用。这些技术帮助开发者构建更加灵活和响应式的界面。 在实际应用中，我们还需要考虑浏览器兼容性问题，...
bella-olonje-jam
03-25
- 多列布局：`column-count`、`column-gap`等属性可实现多列布局。 - 弹性盒（Flexbox）：用于创建响应式和动态布局，通过`display:flex`和相关属性调整元素排列方式。 - 网格布局（Grid）：使用`grid-template-...
css 3布局与技术 外国大牛写的
04-10
- **多列布局**：通过`column-count`等属性可以轻松实现报纸式的多栏布局。 - **响应式设计**：利用媒体查询(`media queries`)可以根据不同的设备特性调整布局和样式。 #### 三、高级布局技巧 ##### 3.1 Flexbox...
CSS3 Columns:比table更好用的分列式布局方法
08-23
CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。 CSS代码 CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局： column-count: 列数目 column-gap: 各列之间间隙宽度 column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算 column-rule-width：列之间分割线宽度 column-rule-style：列之间分割线风格 column-rule-color：列之间分割线演示 column-span: 允许一个元素的宽度跨越多列 column-fill: 分列方式 要想制作出一个漂亮的分列布局，你至少需要用到column-count和column-gap： /[......] 阅读全文>>
css-creating：CSS创作指南
02-04
- 多列布局：`column-count`，`column-gap`等属性简化多列布局。 - 弹性盒模型：增强版的Flex布局，支持更多选项和动画。 - 背景和边框：`border-radius`实现圆角，`box-shadow`添加阴影，`background-size`控制...
【CSS笔记】CSS弹性盒及CSS多列知识总结
吾昂王
06-09 578
弹性盒【控制子元素在父元素中的位置】： display： flex /inline-flex 特点： 1】在弹性盒内部，所有元素都是按照主轴排列的（可以从上往下排，也可以从左往右排） 2】在弹性盒内部的所有元素，都会默认转成块状元素，可以直接添加宽高 3】弹性盒只能影响它的子元素，不能影响孙元素 让父元素形成弹性盒【display:flex;】： 【给父元素加的属性】 1、改变主轴方向 ...
多列布局：
weixin_45376220的博客
09-08 374
多列布局的相关CSS属性 1.column-count 设置列数column-count: 2; 默认值：auto根据 column-width 自定分配宽度 column-width 设置每列的宽度（类似于最小宽度） 默认值：auto根据 column-count自定分配宽度 column-width: 200px; 指定列宽，注意列之间有间距，分好之后每列的宽度不一定是写的列宽，浏览器只是根据...
微信小程序之瀑布流左1右2 分布样式。
weixin_44936767的博客
11-14 1313
背景：如果单纯的使用CSS3column-coun来实现的话，会出现第一个和第二个都在最左边的情况 思路:分左右两列，根据当前数据的下标除以2的余数否为0进行左右排布 //index.wxml <import src="../template/addCard-pubu.wxml" /> <view class="content">//这里加入分列，分两列(column-coun) <view class="left"> <view class="zhon
CSS3新特性详解(五)：多列columns column-count和flex布局
热门推荐
chuangxin的专栏
07-15 1万+
简单来说Html Dom元素就2类：行内元素和块级元素，前者在行内显示（span等），后者换行显示（div等）。所谓布局，比如早期的4大布局：块布局、行内布局、表格布局、定位布局，多半解决的是块级元素行内显示问题，从早期的table布局，到后来的div+css布局，再到后来的多列布局、flex布局等。本文详细讲解了table-cell的使用，及多列布局columns、column-count和flex布局的详细使用说明。
纯css实现简单瀑布流(flex 和 column-count 两种方式)
codingWeb的博客
05-01 3511
两种实现方式虽然都能实现瀑布流效果，但都有各自的缺点，会有介绍到 方式一：column-count实现 直接复制可预览，可以不做任何修改 这种实现方式的缺点是：图片是先从上到下排列，再从左到右排列的 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><...
CSS3之多列布局columns学习
MR_SNAIL的博客
10-19 2843
CSS3之多列布局columns详解
CSS3多列布局：column-count与column-gap详解
- 实例中，`.newspaper`类使用了不同前缀的CSS规则来设置为3列布局，如`-moz-column-count`和`-webkit-column-count`是Firefox和WebKit（Safari/Chrome）的私有前缀，而标准的`column-count`则在所有支持的浏览器中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值