ul弹性怎么一行显示_弹性盒模型

最新推荐文章于 2022-11-20 23:38:03 发布
最新推荐文章于 2022-11-20 23:38:03 发布
阅读量482 收藏
点赞数
文章标签： ul弹性怎么一行显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39829073/article/details/111671714
版权

一、CSS3弹性盒子
弹性盒子是CSS3的一种新布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

二、浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

812f0893e20c1323c4c4ba0e94f04fc9.png

三、CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示，从左到右:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }
        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</body>
</html>

3345765f6b4b51311e79772f04ebec29.png

四、CSS3 弹性盒子常用属性

62f6f93cd39f69a9eb6ddc1be6199d45.png

1. flex-direction 属性

决定项目的方向。

注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }

85372a79d40a8cbb7ef1054dee1308a0.png

2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

4f39285d2032df12cd0377f5ec8ebed7.png

.flex-container{flex-wrap: nowrap | wrap | wrap-reverse;}

可以取三个值：

（1） nowrap (默认)：不换行。

9e31973bc9b9075de516662043cbd706.png

（2）wrap：换行，第一行在上方。

0b17554ab5f8dfad139fb136b313733f.png

（3）wrap-reverse：换行，第一行在下方。

f66dcf683facb55e863fb861fc758d89.png

3. flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.flex-container { flex-flow: <flex-direction> <flex-wrap> }

4. align-items属性

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

ec15e56031b8b2b8ab81ad9cc9baa80c.png

2d34aef2734ec8705bb51357b5ef6ab2.png

b0571d7761d14881980a2891c5a1f490.png

5. justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

bec577215f0453c9b7890d2948c7f1bf.png

b57d53bb2ae50cf13f3850b7d9f494a2.png

565d9ab32cb6e5db037362f4fbf9ae35.png

五、弹性子元素属性

b942847bec449978d6d17d617e63a183.png

1. order属性

.flex-container .flex-item { order: <integer>; }

<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

6bdb2de79b8fee370da46802edcd665a.png

2. flex-grow属性

.flex-container .flex-item { flex-grow: <integer>; }

<integer>：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

4fbba916f4ade1065d68d64abe8456b7.png

3. flex-shrink属性

.flex-container .flex-item { flex-shrink: <integer>; }

<integer>：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

6a36f8c93cb0861394138add39f116c4.png

4. flex-basis属性

.flex-container .flex-item { flex-basis: <integer> | auto; }

<integer>：一个长度单位或者一个百分比，规定元素的初始长度。
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。 5. flex属性
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

.flex-container .flex-item { flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; }

208d167a5ee964b1576c276236ac903e.png

6. align-self属性

.flex-container .flex-item {
    align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}

ba915c09688ef0d7d0528b222fc65d8c.png

de54f63ac9fa7b84d98be77b0a79a598.png

取值同 align-items。

weixin_39829073
关注
CSS3弹性盒布局方式
weixin_59675455的博客
03-15 945
一.CSS3弹性盒 css3引入一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的子项目布局，即使他们的大小是未知或者动态的。 主要是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充 可用空间，或缩小他们以防止溢出容器。 二.flexbox布局功能主要具有以下几点： 1、屏幕和浏览器窗口大小发生变化也可以灵活调整布局； 2、指定
弹性盒模型
qq_45723913的博客
06-02 327
弹性盒模型可以解决横向排列的问题还有盒子之间的间距 display:Flex; dom结构 <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>
css3弹性盒子布局
zhanghuiyu01的博客
03-06 524
css3弹性盒子布局 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时...
弹性盒子 flex-box
lc_web的博客
06-23 661
弹性盒子 弹性盒子是CSS3的一种新布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性
CSS3弹性盒子
渔夫
06-18 517
弹性盒子（box-flex）是CSS3新增的一种布局模式，相比传统的布局模式来说，它更简单好用，而不存在浮动元素脱离正常文档流之后需要在某些地方清除浮动的问题。 1、弹性盒子由弹性容器和弹性子元素组成 2、弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 3、弹性容器内包含了一个或多个弹性子元素。 Css部分和html部分 效果图: 1.fl...
CSS3 弹性盒子(Flex Box)
热门推荐
qq_52301431的博客
04-05 1万+
25、CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 案例，实现水平垂直居中： 正在上传…重新上传取消 绝对定位与负边距实现 #container{ position:relative; } ..
goit-markup-hw-03:标记-块模型+弹性盒
03-18
每个块级元素前后都会自动添加换行，这使得它们各自占据一行。可以通过CSS来调整这些元素的样式，包括边距（margin）、内边距（padding）、宽度（width）和高度（height）等属性，以实现自定义布局。 【HTML弹性盒...
CSS-弹性盒子
weixin_52142992的博客
08-22 2107
弹性盒子的使用、弹性盒子遇到的问题解决
H5C3高频知识点总结（H5C3、圣杯布局、弹性盒模型、浮动、定位）
qq_50906507的博客
11-20 1293
H5C3高频知识点总结
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
weixin_39672443的博客
06-07 5875
目录概述在div+css中，了解块级元素和行内元素还是非常有必要的，比如：对行内元素使用width属性就会失效。虽然自己不是做前端的，但是，在项目中，曾经也弄过从前端布局，也吃过这方面的亏。今天，群里有朋友问起这个，就趁着学习一下，也算是查漏补缺吧，虽然，谈不上精通，但是了解，还是很有必要的。盒子模型css盒子模型分为两种，一种是遵循w3c标准的标准盒子模型，另外一种就是IE盒子模型。标准盒子模型...
CSS3弹性盒布局
Carrie_zzz的博客
10-07 847
box-fiex兼容性的写法 -webkit-box-flex : ;（Safari浏览器，chrome浏览器) -moz-box-flex: ;（Firefox浏览器） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>
CSS3 弹性盒子布局
黄钟飞的博客
03-16 666
1、display:flex。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能； display:flex; 在父元素添加 作用给子类支持flex弹性盒子模型 （Flex容器）它子元素自动成为容器成员 2、使用检查 flex:1 ;拉伸比例 flex-direction:...
CSS3弹性盒子布局
我本浪人--游吟世间
07-25 202
水平垂直居中 1、已知宽高 ①：绝对定位，50% margin挪回一半 ②：绝对定位四个方向为0，实现水平垂直居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> &...
css3弹性盒布局
xuanwuziyou的专栏
08-30 1333
1. box-flex属性 可让宽度自适应 一个例子，三列布局，中间一列的宽度是自适应的，左列的宽度总是300px,右列的宽度总是200px 三个列的父元素使用属性display:box，中间列使用属性box-flex:1 代码： 弹性盒布局 body{ margin:0; padding:0
html 弹性盒子
u013716510的博客
12-11 1560
相信很多人在进行页面布局的时候，经常会使用到float,margin,padding等布局元素，并为了调整细节烦不胜烦，CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)为大家带来了不一样的新体验。 一 基本介绍 下面我们先来个样例，使用方式如下：   { display:-webkit-box; display:-moz-box; displa
css3新增-弹性盒子布局
qq_43260366的博客
03-28 520
1.简介 [1]弹性盒子是css3新增的盒子模型； [2]作用：就是用于解决一个盒子内多个子盒子的排列及其分布问题； [3]特点： 不需要解决父元素塌陷问题)； 不需要计算间距； 父盒子大小改变子盒子能够弹性适应； [4]弹性盒子的组成部分 子盒子； 主轴(默认x轴)； 次轴(默认y轴)； [5]启用弹性布局 父盒子 display:flex; display:inline-flex; （1）主轴的排列以及分布： justify-content: flex-start;
ul li一行两个显示
最新发布
05-28
你可以使用CSS的float属性来实现一个ul li一行两个显示的效果。具体实现步骤如下： 1. 给ul元素设置宽度，例如800px。 2. 给li元素设置宽度为50%，并且使用float:left属性来让li元素左浮动。 3. 使用clear:both属性来清除浮动，以便父元素能够正确地包含所有子元素。 示例代码如下： ``` <style> ul { width: 800px; list-style: none; margin: 0; padding: 0; } li { width: 50%; float: left; } .clear { clear: both; } </style> <ul> <li>第一个项目</li> <li>第二个项目</li> <li class="clear"></li> <li>第三个项目</li> <li>第四个项目</li> <li class="clear"></li> </ul> ``` 注意，最后一个li元素需要加上class="clear"，以便清除最后一行的浮动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值