CSS 3 多列布局 与 伸缩盒模型

最新推荐文章于 2024-08-12 22:07:17 发布
最新推荐文章于 2024-08-12 22:07:17 发布
阅读量865 收藏 8
点赞数 14
分类专栏： 前端专栏 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54412570/article/details/140187345
版权

多列布局

  • column-count: 指定列数，值是数字
  • column-width: 指定列宽，值是长度
  • columns: 同时指定列宽和列数，复合属性：值没有数量和顺序要求
  • column-gap: 设置列边距，值是长度
  • column-rule-style: 设置列与列之间边框的风格
  • column-rule-width：设置列与列之间边框的宽度，值是长度
  • column-rule-color:设置列与列之间边框的颜色
  • column-rule: 设置列边框，复合属性
  • column-span: 指定是否跨列；值：none、all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style> 
.newspaper
{
	columns:100px 3;
	-webkit-columns:100px 3; /* Safari and Chrome */
	-moz-columns:100px 3; /* Firefox */
}
</style>
</head>
<body>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>demo</title> 
<style> 
.newspaper
{
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;

	-moz-column-gap:40px; /* Firefox */
	-webkit-column-gap:40px; /* Safari and Chrome */
	column-gap:40px;

	-moz-column-rule:4px outset #ff00ff; /* Firefox */
	-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
	column-rule:4px outset #ff00ff;
}
</style>
</head>
<body>

<div class="newspaper">
当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

</body>
</html>

伸缩盒模型

  • 2009年，W3C提出了一种新的盒子模型--Flexible Box (伸缩盒模型，又称：弹性盒子)
  • 它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序…
  • 伸缩盒模型的出现，逐渐演变出了一套新的布局方案一一flex布局
  • 传统布局是指：基于传统盒状模型，主要靠：display属性+position属性+float属性
  • flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上

伸缩容器、伸缩项目

  • 开启了flex 的元素，就是伸缩容器。
    • 给元素设置：display: flex或display: inline-flex,该元素就变为了伸缩容器。
    • display: inline-flex很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
  • 伸缩容器所有子元素就是伸缩项目。
    • 伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
    • 无论原来是哪种元素(块、行内块、行内)，一旦成为了伸缩项目，全都会“块状化”。
  • 一个元素可以同时是：伸缩容器、伸缩项目。

主轴、侧轴

  • 主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右
  • 侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下
  • flex-direction主轴方向
    • row: 主轴方向水平从左到右一一默认值
    • row-reverse: 主轴方向水平从右到左
    • column: 主轴方向垂直从上到下
    • column-reverse: 主轴方向垂直从下到上
  • flex-wrap主轴换行方式
    • nowrap: 默认值，不换行
    • wrap: 自动换行，伸缩容器不够自动换行
    • wrap-reverse: 反向换行
  • justify-content主轴对齐方式
    • flex-start:主轴起点对齐--默认值
    • flex-end:主轴终点对齐
    • center:居中对齐
    • space-between:均匀分布，两端对齐（最常用）
    • space-around:均匀分布，两端距离是中间距离的一半
    • space-evenly:均匀分布，两端距离与中间距离一致
  • 侧轴对齐方式
    • align-items 单行侧轴对齐
      • flex-start:侧轴的起点对齐
      • flex-end:侧轴的终点对齐
      • center:侧轴的中点对齐
      • baseline:伸缩项目的第一行文字的基线对齐
      • stretch:如果伸缩项目未设置高度，将占满整个容器的高度（默认值）
    • align-content 多行侧轴对齐
      • flex-start:与侧轴的起点对齐
      • flex-end:与侧轴的终点对齐
      • center:与侧轴的中点对齐
      • space-between：与侧轴两端对齐，中间平均分布
      • space-around:伸缩项目间的距离相等，比距边缘大一倍
      • space-evenly:在侧轴上完全平分
      • stretch:占满整个侧轴（默认值）
    • align-self 单独对齐
      • 默认值为auto,表示继承父元素的align-items属性。
  • 水平垂直居中
    • 方法一：父元素 display: flex;  justify-content: center; align-items: center;
    • 方法二：父元素 display: flex; 子元素 margin: auto;
  • flex-basis 主轴上的基准长度
    • flex-basis设置的是主轴方向的基准长度，会让宽度或高度失效。
      • 主轴横向：宽度失效：主轴纵向：高度失效
    • 浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值auto

伸缩性

  • flex-grow（伸）
    • 默认为0，即：纵使主轴存在剩余空间，也不拉伸
    • 若所有伸缩项目的flex-grow值都为1，则：它们将等分剩余空间
    • 若三个伸缩项目的flex-grow值分别为：1、2、3，则分别占1/6、2/6、3/6的空间
  • flex-shrink (缩）
    • 默认为1，即：如果空间不足，该项目将会缩小。

三个收缩项目，宽度分别为：200px、300px、200px,它们的flex-shrink值分别为：1、2、3

若想刚好容纳下三个项目，需要总宽度为700px

若宽度不够，假设需要收缩100，计算方式如下：

1.计算分母：(200×1)+(300×2)+(200×3)=1400
2.计算比例：
        项目一：(200×1)/1400=比例值1
        项目二：(300×2)/1400=比例值2
        项目三：(200×3)/1400=比例值3
3.计算最终收缩大小：
        项目一需要收缩：比例值1×100
        项目二需要收缩：比例值2×100
        项目三需要收缩：比例值3×100

项目排序

  • order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

残云浸染红缨
关注
  • 14
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 伸缩盒子布局,详解CSS3伸缩布局盒模型Flex布局
weixin_42127937的博客
06-17 1989
一、Flex 布局是什么？CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目...
CSS3-flex布局 | 弹性盒模型
Code6E的博客
03-24 411
部分图来自pink老师教程及蓝桥云课教程，侵权删
CSS3伸缩布局盒模型（Flexbox）
羊羊羊羊羊羊羊的博客
01-14 1102
CSS3伸缩布局盒模型 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 一、伸缩布局盒模型基础 1、CSS中的布局 在css2中定义了4种页面布局模式...
CSS3 Flex 伸缩盒模型布局
爱人BT的博客
12-26 367
一、Flex 布局是什么？ CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexible Box）模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。 CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会...
CSS3 伸缩布局盒模型
weixin_33807284的博客
03-28 129
CSS3 伸缩布局盒模型 CSS3-"&gt;CSS3 伸缩布局盒模型 　　CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用空间。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。　　更重要的是，Flexbox布局方向不可预知，不像常规的布局(块级从上到下，内联从左到右)，而那些常规的适合页面布局，但对于支...
CSS3多列布局与伸缩布局
weixin_30410999的博客
08-08 120
一、多列布局 1.columns 设置的列数和每列的宽度。复合属性 columns：<' column-width '> || <' column-count '> 2.column-width 设置每列的宽度（类似于最小宽度） length： 用长度值来定义列宽。不允许负值 auto： 根据 <' column-count '> 自定分配宽度 3...
css3 盒子模型
weixin_49346755的博客
10-02 2304
会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽，每个块级盒子都会换行，且width 和 height 属性可以发挥作用，内边距、外边距和边框会将其他元素从当前盒子周围“推开”。常见块级元素：、、、-、、、、、。在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
CSS3-弹性盒子模型
weixin_61006312的博客
10-06 696
css3-弹性盒子模型
css3盒模型的属性,css3弹性盒模型属性整理
weixin_31577315的博客
08-04 421
display:box;是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。设置父容器样式display:box;.father{margin:0 auto;width:1000px;height:200px;border:1px solid red;/*设置父元素的显示方式*/display:-web...
CSS的重绘和重排是什么？
沐爸的博客
08-12 598
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
css实现水滴效果图
yinge0508的博客
08-12 120
【代码】css实现水滴效果图。
css中的高度塌陷
Lil_y1的博客
08-12 304
解决css中的高度塌陷
CSS 多按钮根据半圆弧度排列
前端技术
08-08 410
多个按钮根据弧度，延边均匀排列。
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
08-07 697
对于有打印需求的网页，特别是文章的详情页，需要设置专门的打印样式来适配页面。CSS 打印样式允许你为网页设置专门用于打印的样式。文本就是专门介绍如何使用 CSS 打印样式为 Web 页面设置专业的打印机效果。
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 703
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
在vue3中配置scss
最新发布
iku_n的博客
08-12 217
要在 Vue 3 中使用 SCSS（Sass 的一个子集），你需要安装相应的依赖，并对项目进行一些配置。
CSS 的 BFC（块级格式化上下文）
qq_30193097的博客
08-12 181
常见的可以创建BFC的元素包括：根元素、floats（浮动元素）、positioned elements（定位元素）、table-cell、table-caption、in-flow（在文档流中的元素）、overflowing elements（溢出当前包含块的元素）。：在传统的布局技术中，为了解决浮动元素引起的父元素高度塌陷问题，通常使用清除浮动的技术来确保父元素能够正确接收子元素的高度。BFC是一个独立的容器，它内部的元素不会受到外部容器的影响，同时它也会影响其内部元素的表现。
css使元素垂直水平居中
Lil_y1的博客
08-12 347
在搭建网页的时候， 我们往往会让某个元素垂直水平居中来实现自己的布局。本文总结了使元素垂直水平的几种方法，废话不多说直接开始。给父元素使用相对定位，使子元素在绝对定位时以该父元素为基准。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值