flex布局，最后一行靠左显示

最新推荐文章于 2024-06-12 09:52:12 发布
最新推荐文章于 2024-06-12 09:52:12 发布
阅读量4.9k 收藏 1
点赞数
分类专栏： css3 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuj1935/article/details/106970006
版权
flex布局，最后一行靠左显示

// 最后一行靠左显示
flex-wrap: wrap;
align-content: flex-start;

在这里插入图片描述

       /* 设置为伸缩盒子 */
       /* display: flex;*/
        /* 设置主轴方向 */
        /* flex-direction: row; */
        /* 竖立显示 */
        /* flex-direction: column; */
        /* flex-direction: row-reverse; */
        /* flex-direction: column-reverse; */
        /* 设置元素在主轴方向对齐方式 */
        /* justify-content: flex-start; */
        /* justify-content: flex-end; */
        /* justify-content: center; */
        /* 两端对齐,中间自适应 */
        /* justify-content: space-between; */
        /* 环绕对齐 */
        /* justify-content: space-around;   */
        /* 设置元素在侧轴对齐方式 */
        /* align-items: flex-start; */
        /* align-items: flex-end; */
        /* align-items: center; */
        /* 拉伸 */
        /* align-items: stretch; */
        /* 设置元素是否换行显示 */
        /*flex-wrap: nowrap; */
        flex-wrap: wrap;
        /* 设置元素换行后的对齐方式 */
        /* align-content: flex-start; */
        /* align-content: flex-end; */
        /* align-content: center; */
        /* align-content: space-between; */
        /* align-content: space-around; */
        /* 默认值 */
		/* align-content: stretch; */

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 900px;
            height: 580px;
            border: 1px solid red;
            margin: 50px auto;
            /* 设置为伸缩盒子 */
            display: flex;
            /* 设置主轴方向 */
            /* flex-direction: row; */
            /* 竖立显示 */
            /* flex-direction: column; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column-reverse; */
            /* 设置元素在主轴方向对齐方式 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* 两端对齐,中间自适应 */
            /* justify-content: space-between; */
            /* 环绕对齐 */
            /* justify-content: space-around;   */
            /* 设置元素在侧轴对齐方式 */
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: center; */
            /* 拉伸 */
            /* align-items: stretch; */
            /* 设置元素是否换行显示 */
            /*flex-wrap: nowrap; */
            flex-wrap: wrap;
            /* 设置元素换行后的对齐方式 */
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-between; */
            /* align-content: space-around; */
            /* 默认值 */
			/* align-content: stretch; */
			
			align-content: flex-start;
			

			/* 
			// 最后一行靠左显示
			flex-wrap: wrap; 
			align-content: flex-start; 
			*/
        }
        
        .one {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .two {
            width: 100px;
            height: 100px;
            background-color: green;
        }
        
        .three {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>

<body>

    <div class="box">

        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="three">3</div>
        <div class="three">3</div>
        <div class="three">3</div>
        <div class="three">3</div>
        <div class="three">3</div>
        <div class="three">9</div>
        <div class="three">10</div>
        <div class="three">11</div>
        <div class="three">12</div>

    </div>
</body>

</html>
前端酱紫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
如何使用原生CSS在DIV层中画一条线？
人间草木
11-28 4388
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta htt...
#css#【一】 flex布局小技巧之让某个子元素靠右或靠左显示
热门推荐
ZHENGCHUNJUN的博客
05-13 3万+
#css001 flex布局小技巧之让某个子元素靠右显示 用flex布局小技巧之让某个子元素靠右显示， 只需要两句代码，轻松搞定！ 代码1： 在父盒子里面加入以下代码： display: flex 代码2： 在需要移动的子盒子里（此处为向右显示），加入以下代码： margin-left: auto 【 html版块示例 】： <!--我是父盒子--> <div class="father_box"> <!--两个子盒子--> <div class="so
关于Flex布局换行后靠左对齐的方式
w2898的博客
07-11 3456
这里不推荐使用grid布局，因为grid支持包版本浏览器，其次在布局的时候不灵活，用他写写移动端就知道了，flex虽然是单一的，但是他的灵活性和兼容性好，不会出现奇奇古怪的问题，出现问题flex调试起来也方便。既然谈到了grid,正好说说他和flex的区别。既然用了这个靠左对齐，就来谈一下。
flex布局（分布在两边）（靠左显示）（靠右显示）（元素换行后的对齐方式）（是否换行显示 ）
最新发布
weixin_51494148的博客
06-12 233
flex布局（分布在两边）（靠左显示）（靠右显示）（元素换行后的对齐方式）（是否换行显示 ）设置元素换行后的对齐方式。两端对齐,中间自适应。设置元素是否换行显示。
简单易懂的 flex 布局技巧：前面盒子左对齐，后面盒子右对齐
Shids_的博客
01-23 1万+
简单易懂的 flex 布局技巧：前面盒子左对齐，后面盒子右对齐
flex，多种方法做到一个在左，一个在右边的布局。
shaoduo的博客
08-31 1万+
　　在做一个列表的时候，单个Flex容器内有三个内联的靠右对齐的按钮，效果如图： 　　而我想让红色按钮靠左，而另外两个蓝色按钮保持靠右怎么办？ 方法一： 　　为红色按钮单独加上：flex: 1 　　此效果的原理是：利用flex:1，动态填充宽度 方法二： 这个时候我们可以为红色按钮单独加上：margin-right : auto； 　　效果如图： 　　此效果的原理是： 　　margin-right 不设置的话默认是0，父容器width 定宽之后...
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
flex弹性盒布局最后一行左对齐的实现思路
01-19
但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图 <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> ul{ display: flex; ...
让CSS flex布局最后一行列表左对齐的N种方法(小结)
12-28
引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。 问题描述 //html <div class=list></div> <div class=list></div> <div class=list></div> ...
解决flex布局space-between最后一行左对齐的方法
11-20
首先看代码和效果↓ <style> .main { ... display: flex; justify-content: space-between; flex-wrap: wrap; } .main>div { width: 100px; height: 100px; margin-bottom: 10px; backg
详解flex实现左右布局中按钮溢出隐藏效果
09-22
`text-overflow: ellipsis`用于在文本溢出时显示省略号，`overflow: hidden`隐藏超出容器的元素内容，`white-space: nowrap`则防止文本换行，保持在一行内显示。 在文章给出的例子中，初始尝试是直接将这些样式应用...
Flex布局使最后一行居左
Moon Star
07-10 3326
如何解决在使用flex布局时，最后一行没有居左展示，并产生错位的问题？
flex布局换行之后让底部一行左对齐
a1783118的博客
11-22 1621
flex布局换行之后让底部一行左对齐
flex布局对齐方式设置space-between，将最后一行元素左对齐
weixin_45559449的博客
03-19 6278
给盒子设置 justify-content: space-between ， 可以均匀排列盒子中的每个元素，首个元素放置于起点，末尾元素放置于终点。达到左右对齐的效果。但当最后一行元素不能铺满盒子时，会在盒子中均分排列，效果并不是我们需要的。 盒子设置flex布局， 对齐方式设置 justify-content: space-between时，将最后一行元素左对齐，有一下几种方法：特点：适用于任意列数布局，比较简单，缺点是会产生空标签 方案：使用循环体循环一整行空元素。宽度为单个元素宽度，高度为0codeh
弹性布局多列换行居左布局
qq_38026437的博客
11-01 2097
项目中有碰到一列 3 个及以上的 多行布局 设置 justify-content: space-between; 后 如果满格 就是正常显示，如果最后一行少1个就会出现 两头布局，影响美观。 做一个解决这种问题的样式 css .position-view,.size-view{ width: 150upx; margin: 10upx 0; } .size-view{ p...
css3 Flex
平安喜乐
09-28 689
在2009年，W3C提出了一种新的盒子模型——Flexible Box（伸缩盒模型，又称：弹性盒子）。它可以轻松地控制元素分布方式、元素对齐方式、元素视觉顺序等等。除了部分IE浏览器不支持，其他浏览器均已全部支持。伸缩盒模型的出现，逐渐演变出了一套新的布局方案——Flex布局。display属性 +position属性 +float属性。Flex布局目前在移动端应用比较广泛，因为传统布局不能很好地呈现在移动设备上。
让CSS flex布局最后一行列表左对齐的N种方法
HD243608836的博客
03-30 2900
但是有些人代码洁癖，看不惯这种空的占位的html标签，则可以试试一开始的两个方法，一是动态计算margin，模拟两端对齐，另外一个是根据列表的个数，动态控制最后一个列表元素的margin值实现左对齐。这个方法其实很简单，也很好理解，就是使用足够的空白标签进行填充占位，具体的占位数量是由最多列数的个数决定的，例如这个布局最多7列，那我们可以使用7个空白标签进行填充占位，最多10列，那我们需要使用10个空白标签。Grid布局天然有gap间隙，且天然格子对齐排布，因此，实现最后一行左对齐可以认为是天生的效果。
display:flex 均等排列 一行排两列或者多列，最后的元素靠左对齐
还不是【web】的博客
02-07 3万+
display:flex flex-direction属性决定主轴的方向（即项目的排列方向）。 flex-direction: row | row-reverse | column | column-reverse; row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-rever...
flex布局 等分 最后一行左边对齐
09-07
如果想要最后一行左对齐，可以通过调整容器的属性和添加额外的占位子元素来实现。 首先，将容器的属性设置为flex布局，使用"flex-wrap: wrap;"来使子元素能够换行。这样当子元素的数量超过一行的容量时，会自动换到...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端酱紫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值