CSS学习（二十一）-flexbox模型之二

最新推荐文章于 2022-10-13 19:49:54 发布
最新推荐文章于 2022-10-13 19:49:54 发布
阅读量1.2k 收藏
点赞数
分类专栏： css css学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bwshqh/article/details/51002560
版权
一、理论：
1.flex-flow
a.flex-direction 设置伸缩容器的伸缩流方向
b.flex-wrap 设置伸缩容器中的伸缩项目在伸缩容器无足够空间时，伸缩项目在伸缩容器中是否换行排列
2.flex-pack
a.具有与box-pack属性相同的参数
b.distribute 伸缩项目会平均分布在同一行里
c.start 伸缩容器中的第一个伸缩项目的起始边缘置于伸缩容器的主轴起始；下一个伸缩项目的起始边缘与第一个伸缩项目的末尾边缘紧挨在一起，其他伸缩项目依次沿着主轴依次排列。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的末尾
d.end 所起效果与start相反
e.center 所有伸缩项目边挨边放置在一起
f.justify 所有伸缩项目会平均分配在行里，沿着伸缩容器布局轴方向的任何额外空间都被平均分布于各个伸缩项目之间
3.flex-align 
a.具有box-align的所有属性
b.stretch 伸缩项目拉伸填充整个伸缩容器。
二、实践：

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding: 0;
        }
        .flexbox-container{
            padding:10px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin:50px;
            background-color: hsla(10,80%,10%,0.2);
        }
        .flexbox-container >div{
            width: 100%;
            height: 100px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin: 5px;
            font-size:20px;
            text-align: center;
            line-height: 100px;
            color:#fff;
            font-weight: bold;
        }
        .flexbox-container > div:nth-child(1){
            background-color: hsla(120,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(2){
            background-color: hsla(120,30%,10%,0.8);
        }
        .flexbox-container > div:nth-child(3){
            background-color: hsla(20,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(4){
            background-color: hsla(20,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(5){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(6){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container{
            display:-ms-flexbox;
            -ms-flex-direction:column;
            -ms-flex-flow:row;
        }
    </style>
</head>
<body>
    <div class="flexbox-container">
        <div>Box1</div>
        <div>Box2</div>
        <div>Box3</div>
        <div>Box4</div>
        <div>Box5</div>
        <div>Box6</div>
    </div>
</body>
</html>
2. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding: 0;
        }
        .flexbox-container{
            padding:10px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin:50px;
            background-color: hsla(10,80%,10%,0.2);
        }
        .flexbox-container>div{
            width: 50px;
            height: 100px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin: 5px;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
            color:#fff;
            font-weight: bold;
        }
        .flexbox-container>div:nth-child(1){
            background-color: hsla(120,30%,50%,0.8);
        }
        .flexbox-container>div:nth-child(2){
            background-color: hsla(120,30%,10%,0.8);
        }
        .flexbox-container>div:nth-child(3){
            background-color: hsla(20,30%,50%,0.8);
        }
        .flexbox-container>div:nth-child(4){
            background-color: hsla(20,80%,50%,0.8);
        }
        .flexbox-container>div:nth-child(5){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container>div:nth-child(6){
            background-color: hsla(320,80%,80%,0.8);
        }
        .flexbox-container{
            display: -ms-flexbox;
            -ms-flex-flow:row;
        }
    </style>
</head>
<body>
    <div class="flexbox-container">
        <div>Box1</div>
        <div>Box2</div>
        <div>Box3</div>
        <div>Box4</div>
        <div>Box5</div>
        <div>Box6</div>
    </div>
</body>
</body>
</html>
3. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding: 0;
        }
        .flexbox-container{
            padding:10px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin:50px;
            background-color: hsla(10,80%,10%,0.2);
        }
        .flexbox-container >div{
            width: 100px;
            height: 100px;
            border:1px solid hsla(120,30%,50%,0.8);
            margin: 5px;
            font-size:20px;
            text-align: center;
            line-height: 100px;
            color:#fff;
            font-weight: bold;
        }
        .flexbox-container > div:nth-child(1){
            background-color: hsla(120,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(2){
            background-color: hsla(120,30%,10%,0.8);
        }
        .flexbox-container > div:nth-child(3){
            background-color: hsla(20,30%,50%,0.8);
        }
        .flexbox-container > div:nth-child(4){
            background-color: hsla(20,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(5){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container > div:nth-child(6){
            background-color: hsla(320,80%,50%,0.8);
        }
        .flexbox-container{
            display:-ms-flexbox;
            -ms-flex-direction:row wrap;
            -ms-flex-flow:baseline;
        }
    </style>
</head>
<body>
<div class="flexbox-container">
    <div>Box1</div>
    <div>Box2</div>
    <div>Box3</div>
    <div>Box4</div>
    <div>Box5</div>
    <div>Box6</div>
</div>
</body>
</html>




bwshqh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
弹性盒子（Flexbox）模型——入门教程
weixin_48610566的博客
04-29 589
在学习时需注意，弹性盒子本质上也用的是div，两者区别在于后者将div的display变为了flex。
css-grids-flexbox
02-14
- "css-grids-flexbox-master"可能包含课程笔记、示例代码、练习文件等，帮助学习者深入理解并动手实践这两个布局技术。 通过深入学习和实践这些知识点，开发者能够构建更高效、更具响应性的网页布局，提升网页...
马蹄疾 | 聊聊你可能并没有完全掌握的 Flex 布局：从概念入手，丝丝入扣
weixin_34349320的博客
02-26 250
很多谈 Flex 布局的文章都是一个一个属性的干聊，有点像约会时的查户口，枯燥而无趣。 如果让你硬记中国 34 个省级行政单位，你不仅会记的很吃力，可能还没法分清省和省之间的相邻关系。而一旦你心中有了一副中国地图，这些知识就变成信手拈来的东西了。 这篇文章就是立志做 Flex 布局的中国地图。 本文是『horseshoe·Flex专题』系列文章之一，后续会有更多专题推出 GitHub地址(持续更...
CSS3实践之路(二):盒子模型(box Model)和边框(border)
11-02 314
.border1{ width:150px; height:80px; background-color:#6699ff; border:2px solid; border-radius:20px 5px 20px 5px / 10px 5px 10px 5px; } .circel{ background-color:#0066ff; widt...
盒子模型（Box Model）
chen1042246612的博客
01-30 609
所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。 盒子边框（border） 边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。 语法： border : border-width || border-style || border-color ...
CSS BOX模型
weixin_30924239的博客
08-22 87
对于box模型概念的理解以及它与决定元素最终尺寸的方式有何关系，是理解如何设定网 页上的元素位置的基础。box模型应用到块级元素。一个随之而来的概念，内联布局模型 定义了如何设定内联元素的位置。 对于静态（非定位）元素和相对定位元素，计算宽带就是包含块的宽度减去任何水平边距 、边框、填充和滚动条的值。也就是，当从包含块的宽度减去水平边距、边框、填充和滚 动条的值。剩下的部分。 ...
CSS-Flexbox-Grid
04-18
【CSS-Flexbox-网格】是前端开发中的一个重要概念，它是CSS3中引入的一种布局模式，全称为“Flexbox布局”或“弹性盒布局”。这个布局模型主要用于解决传统CSS布局方式在处理动态内容、响应式设计以及复杂排列时遇到...
P510-FE-CSS-pseudos-flexbox-media
05-15
标题"P510-FE-CSS-pseudos-flexbox-media"揭示了本次讨论的主题，主要集中在CSS（层叠样式表）中的弹性盒模型（Flexbox）以及与之相关的伪选择器和媒体查询（@media rules）。这个主题通常涉及到前端开发中的网页...
css-flexbox-grid-lab
03-21
《CSS Flexbox与Grid布局实验室探索》 在Web开发领域，CSS布局技术是构建网页界面不可或缺的部分。随着技术的发展，Flexbox（弹性盒布局）和Grid（网格布局）已经成为现代前端开发中的主流布局方式，极大地提高了...
CSS-Grid-Layout-e-Flexbox
05-27
总之，"CSS-Grid-Layout-e-Flexbox" 主题涵盖了Web布局的最新技术，通过学习这些知识，开发者可以构建出更具创新性和可维护性的网页布局。在CSS Grid Layout 和 Flexbox 的帮助下，网页设计师可以更好地应对各种设计...
box model（盒子模型）
x1145540679的博客
03-09 324
1.frame(边框) 2.padding(内边距) 内容区和边框之间的距离是内边距，一共有四个方向的内边距 padding-top padding-right padding-bottom padding-left 内边距的设置会影响盒子的大小，背景颜色会延伸到内边距上 html <!doctype html> <html> <head> <meta charset="UTF-8"> <title&g
盒子模型（box model）
Antoine__的博客
10-13 4429
盒子模型是css中特别重要的一个知识点，今天我和大家一起学习一下。
盒模型（Boxmodel）
羊羊羊羊羊羊羊的博客
01-14 2184
盒模型 知识点 理解W3C标准盒模型 理解并掌握盒模型相关属性的使用方法 了解CSS盒模型的浏览器兼容性 掌握浮动布局的设计与使用方法 掌握各种页面元素的定位方法 掌握CSS3新增的相关属性的使用方法及兼容性 一、W3C标准盒模型 1、什么是盒模型 盒模型是使用css对网页元素进行控制时的一个概念，浏览器把网页中的每一个元素都看作一个盒模型，每个盒模型都由以下几...
CSS学习（二十）-flexbox模型
bwshqh的博客
03-26 1513
一、理论： 1.混合版本flexbox模型 a.display  1)flexbox 设置元素为块级容器 2)inline-flexbox 设置元素为内联块伸缩容器 b.display容器的基本使用 1)主要用于IE10浏览器 2.伸缩流方向flex-direction a.flex-direction 1)row ltr-->自左向右排列，rtl-->自右向左排列 2)row
CSS盒子模型（Box Model）
weixin_30836759的博客
08-06 115
一、背景 　　作为CSS的重点，三大模块之一的盒子模型，这部分无论如何也要精通透彻。在任何一个网页当中，都有自己的布局方式，所谓网页布局方式就是如何把网页里面的文字、图片，很好的排版成美工设计的样式，这时文字图片就如同牛奶需要用盒子装起来，然后可以随意的摆放它的位置。 　　网页布局的本质：把网页元素（文字、图片等），放入盒子里面。并利用CSS摆放盒子的过程就是网页布局。就像玩积木，...
CSS之盒子（Box）模型
小菜鸟的初学之路
06-04 753
Css盒子模型 学习Css盒子模型，首先就要知道Css块级元素和内连元素 块级元素：就是我们写的各个的代码块，...、、等。 内连元素：、、等 内连元素是可以包含于块级元素里面的，也就是成为一个子元素。   盒子模型的本质上是一个盒子，封装着周围的HTML元素，他包括：边框，边距，填充和实际内容。   外边框（Margin）：清除边框外的区域，外边框是透明的； 边框（Border
css之box模型
Deep Thinking
11-24 573
tags : css mastery
css的box模型_CSS Box模型
cuk0051的博客
08-31 276
css的box模型Every CSS element is essentially a box. Every element is a generic box. 每个CSS元素本质上都是一个盒子。 每个元素都是一个通用框。 The box model explains the sizing of the elements based on a few CSS properties. 盒子...
js-Flexbox盒子布局
最新发布
05-24
Flexbox（Flexible Box）是CSS3中的新特性，是一种用于页面布局的模型，它可以让我们更加简单和高效地进行页面布局。下面是使用Flexbox实现盒子布局的步骤： 1. 父容器设置为flex布局 在父容器中，我们需要将其设置为flex布局，这可以通过设置display属性为flex来实现，例如： ``` .container { display: flex; } ``` 2. 设置子元素的排列方式 在父容器中，我们需要设置子元素的排列方式，这可以通过设置flex-direction属性来实现，例如： ``` .container { display: flex; flex-direction: row; } ``` 上述代码中，我们设置子元素按照行（row）方向排列。 3. 设置子元素的对齐方式 在父容器中，我们还可以设置子元素的对齐方式，这可以通过设置justify-content和align-items两个属性来实现，例如： ``` .container { display: flex; flex-direction: row; justify-content: center; align-items: center; } ``` 上述代码中，我们设置子元素在水平方向上居中对齐，并且在垂直方向上也居中对齐。 4. 设置子元素的大小和位置 在父容器中，我们还可以设置子元素的大小和位置，这可以通过设置flex属性来实现，例如： ``` .container { display: flex; flex-direction: row; justify-content: center; align-items: center; } .item { flex: 1; } ``` 上述代码中，我们设置子元素的flex属性为1，表示子元素会根据父容器的剩余空间来分配大小和位置。 综上所述，使用Flexbox可以让我们更加便捷地进行页面布局，同时也提高了页面的响应能力和可维护性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值