让CSS flex布局最后一行列表左对齐的N种方法(小结)_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

文档里的语法写得很清楚,第二个参数可选none|[<'flex-grow'><'flex-shrink'>?flex:auto与flex:1 1 auto相同flex:none与flex:0 0 auto相同flex:与flex:1 0px相同看看文档就明白了www.zgxue.com防采集请勿采集本网。

引用张鑫旭的一篇文章分享给大家,如果你想进行修改进入链接点到对应的图片生成的链接进入,方可修改。

flex-align:默认是设置垂直方向的对齐方式,值:其实布局还有好多新玩法,你可以多看看相关的教程,比如说现在有个视频的系列名称叫做《Buid New World》,里面有一集专门讲 CSS3 复杂布局形式

问题描述

在当前父元素(添加flex属性)里添加多个元素,即便子元素再多也不会出现滚动条的,有一种解决方法:你在要添加的子元素外再包裹一个元素div.a,这样不断添加子元素的时候,是增加的.a的高度,

//html<div class="container"> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div></div>//css.container { display: flex; justify-content: space-between; flex-wrap: wrap;}.list { width: 24%; height: 100px; background-color: skyblue; margin-top: 15px;}

box属性是一行分多列,而你的需求相当于三行,因此,使用box不适合。建议: 使用3个长度100%的主div进行布局;使用CSS定位控制(position属性)固定上下两个div。至于居中(因为是100%的长度,居中

这种情况明显与我们想要的情况不同。

父容器独占还是子独占?父容器独占设成块,不行就宽度100% 字元素独占,要么不要用flex,要么就是竖排flex-direction:column;

行数固定解决方法

flex:让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容 缩你是想变小吗,flex默认值只有0或者1,要改变大小直接修改width和height的值就好了

方法一 用margin 模拟缝隙

比如

.container { display: flex; flex-wrap: wrap;}.list { width: 24%; height: 100px; background-color: skyblue; margin-top: 15px;}.list:not(:nth-child(4n)) { margin-right: calc(4% / 3);}

样式如下

方法二 根据最后一行个数确定margin

由于每一列的数目都是固定的,因此,我们可以计算出不同个数列表应当多大的margin值才能保证完全左对齐。

例如,假设每行4个元素,结果最后一行只有3个元素,则最后一个元素的margin-right大小是“列表宽度+间隙大小”的话,那最后3个元素也是可以完美左对齐的。

然后,借助树结构伪类数量匹配技术(这篇文章“伪类匹配列表数目实现微信群头像CSS布局的技巧”中的布局技巧就是借助这种技术实现),我们可以知道最后一行有几个元素。

例如: .list:last-child:nth-child(4n - 1)说明最后一行,要么3个元素,要么7个元素…… .list:last-child:nth-child(4n - 2)说明最后一行,要么2个元素,要么6个元素……

 

在本例中,一行就4个元素,因此,我们可以有如下CSS设置:

.container { display: flex; /* 两端对齐 */ justify-content: space-between; flex-wrap: wrap;}.list { width: 24%; height: 100px; background-color: skyblue; margin-top: 15px;}/* 如果最后一行是3个元素 */.list:last-child:nth-child(4n - 1) { margin-right: calc(24% + 4% / 3);}/* 如果最后一行是2个元素 */.list:last-child:nth-child(4n - 2) { margin-right: calc(48% + 8% / 3);}

呈现的现象如下

即使你做了删除操作,依旧是完好的样式。这一点很佩服

方法三 如果子元素的宽度不固定

这个就很难处理,但是依旧有解决方法,程序真是越来越有意思。

这个时候用上边的那种方法就比较困难了,因为宽度不固定不能根据宽度计算出margin的值

(1)最后一项margin-right:auto;

.container { display: flex; justify-content: space-between; flex-wrap: wrap;}.list { background-color: skyblue; margin: 10px;}/* 最后一项margin-right:auto */.list:last-child { margin-right: auto;}

(2)创建伪元素并设置flex:auto或flex:1

.container { display: flex; justify-content: space-between; flex-wrap: wrap;}.list { background-color: skyblue; margin: 10px;}/* 使用伪元素辅助左对齐 */.container::after { content: ''; flex: auto; /* 或者flex: 1 */}

四、如果每一行列数不固定

//HTML代码:<div class="container"> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <i></i><i></i><i></i><i></i><i></i><i></i>//比div少一个即可!</div>//CSS代码:.container { display: flex; justify-content: space-between; flex-wrap: wrap; margin-right: -10px;}.list { width: 100px; height:100px; background-color: skyblue; margin: 15px 10px 0 0;}.container > i { width: 100px; margin-right: 10px;}

到此这篇关于让CSS flex布局最后一行列表左对齐的N种方法(小结)的文章就介绍到这了,更多相关CSS flex最后一行列表左对齐内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

设置flex-direction属性flex-direction:column内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 解决flex布局space-between最后一行左对齐的方法
  • flex弹性盒布局最后一行左对齐的实现思路
  • css3 flex布局 justify-content:space-between 最后一行左对齐
  • css3的Flex布局如何一行排一个元素
  • css3的flex布局,flex:0 auto 与 flex:0 1 auto 为什么相同
  • CSS中Flex布局强制换行的问题
  • CSS box布局,display:box的父元素内有6个box-flex : 1的子元素。能不能控制3个一行?
  • flex 怎么设置 自动换行的布局
  • CSS弹性盒子布局flex
  • 用CSS3 box-flex 无法实现三栏垂直布局,上下层固定,中间层自适变化
  • css flex 怎么独占1行
  • css3 flex布局中怎么缩
  • 怎么给flex布局的div设置宽度
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程cssflex最后一行css3 flex布局 justify-content:space-between 最后一行左对齐css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字css 列表模型之marker标记的使用让css flex布局最后一行列表左对齐的n种方法(小结)解决移动端1px边框最好的方法(推荐)css中的四种定位区别详解深入理解css background-blend-mode的作用机制css字体、文本、列表属性详细介绍css 控制动画播放与暂停的小技巧(非常实用)css 伪类修改input选中样式的示例代码使用css写带纹理渐变背景图的示例代码纯css实现div高度根据自适应宽度(百分比)调整
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved