CSS学习（二十）-flexbox模型

最新推荐文章于 2022-04-29 21:19:41 发布
最新推荐文章于 2022-04-29 21:19:41 发布
阅读量1.5k 收藏
点赞数
分类专栏： css css学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bwshqh/article/details/50989483
版权
一、理论：
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-reverse ltr-->自右向左排列，rtl-->自左向右排列
3)column 按出现顺序从上到下排列
4)column-reverse 伸缩项目从下到上排列
二、实践：

(注：1，2，3是伸缩布局盒，4，5是flexbox模型)

1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin : 0 10px;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </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;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #sidebar-right{
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 3;
            -moz-box-ordinal-group: 3;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin : 0 10px;
            -moz-box-flex:1;
            -webkit-box-flex:1;
            box-flex:1;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            box-ordinal-group:2;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</body>
</html>
3. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        body{
            height: 100%;
            display: -webkit-box;
            display:-moz-box;
            display:box;
            -moz-box-orient: vertical;
            -webkit-box-orient:vertical;
            box-orient:vertical;
            width:100%;
        }
        *{
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-box-sizing:border-box;
        }
        #header,#footer{
            width:100%;
            padding:10px;
            background-color:#ccc;
        }
        #sidebar-left,
        #sidebar-right{
            width:220px;
            padding:10px;
            background-color: #123589;
        }
        #sidebar-right{
            -moz-box-ordinal-group: 3;
            -webkit-box-ordinal-group: 3;
            box-ordinal-group: 3;
        }
        #main{
            background-color: #9eaab6;
            padding: 10px;
            margin:0 10px;
            -moz-box-ordinal-group: 2;
            -webkit-box-ordinal-group: 2;
            -moz-box-group: 2;
        }
        #page{
            width:100%;
            display:-moz-box;
            display:-webkit-box;
            display:box;
        }
        #main{
            -moz-box-flex: 1;
            -webkit-box-flex:1;
            -moz-box-flex: 1;
        }
    </style>
</head>
<body>
    <div id = "header">
        <h1>Header</h1>
    </div>
    <div id = "page">
        <div id="main">
            <h1>MainContent</h1>
        </div>
        <div id="sidebar-left">
            <h1>LeftContent</h1>
        </div>
        <div id="sidebar-right">
            <h1>RightContent</h1>
        </div>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</body>
</html>
4. 

<!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: 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>
5. 

<!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;
        }
    </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
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
FLEXBOX(弹性盒布局模型)以及适用场景?
menggx1的博客
04-26 1878
FLEXBOX(弹性盒布局模型)以及适用场景?目录1.背景介绍2.知识剖析3.常见问题4.解决方案5.编码实战6.扩展思考7.参考文献8.更多讨论1.背景介绍FLEX布局是什么？2009年，W3C提出了一种新的布局方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。 目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。2.知识剖析一，怎么运用FLEX布局f...
请解释一下CSS3的Flexbox（弹性盒布局模型）以及适用场景？
wang19900927的博客
09-11 7518
1）背景介绍： 网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便 2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 （2）知识...
（11）：说说flexbox（弹性盒布局模型），以及适用场景
weixin_46511008的博客
10-03 772
面试官：说说flexbox（弹性盒布局模型），以及适用场景？ 一、是什么 1、flexible box 简称 flex，意为 ”弹性布局” ，可以简便、完整、响应式地实现各种页面布局 2、采用 flex 布局的元素，称为 flex 容器 container 3、它的所有子元素自动成为容器成员，称为 flex 项目 item 4、容器中默认存在两条轴， 主轴 和 交叉轴 ，呈90度关系。项目默认沿主轴排列，通过 flex-direction 来决定主轴的方向 5、每根轴都有起点和终点，这对于元素的对齐非常
弹性盒子（Flex Box）模型
zg0601的博客
10-21 938
弹性盒子（Flex Box）模型
马蹄疾 | 聊聊你可能并没有完全掌握的 Flex 布局：从概念入手，丝丝入扣
weixin_34349320的博客
02-26 250
很多谈 Flex 布局的文章都是一个一个属性的干聊，有点像约会时的查户口，枯燥而无趣。 如果让你硬记中国 34 个省级行政单位，你不仅会记的很吃力，可能还没法分清省和省之间的相邻关系。而一旦你心中有了一副中国地图，这些知识就变成信手拈来的东西了。 这篇文章就是立志做 Flex 布局的中国地图。 本文是『horseshoe·Flex专题』系列文章之一，后续会有更多专题推出 GitHub地址(持续更...
CSS学习（二十一）-flexbox模型之二
bwshqh的博客
03-29 1259
一、理论： 1.flex-flow a.flex-direction 设置伸缩容器的伸缩流方向 b.flex-wrap 设置伸缩容器中的伸缩项目在伸缩容器无足够空间时，伸缩项目在伸缩容器中是否换行排列 2.flex-pack a.具有与box-pack属性相同的参数 b.distribute 伸缩项目会平均分布在同一行里 c.start 伸缩容器中的第一个伸缩项目的起始边缘置于伸缩容
html-css-digitalocean-flexbox:Digital Ocean-flexbox版本
05-09
标题中的“html-css-digitalocean-flexbox:Digital Ocean-flexbox版本”暗示了这是一个关于使用HTML和CSS在Digital Ocean平台上创建项目的教程，重点是利用Flexbox布局模型。在这个项目中，开发者可能学习如何构建...
CSS-Flexbox-Grid
04-18
在压缩包文件"CSS-Flexbox-Grid-main"中，可能包含了关于Flexbox网格的示例代码、教程文档或练习项目，这些资源可以帮助进一步学习和实践Flexbox布局技术。通过深入学习和实践这些材料，你将能够更好地利用Flexbox来...
css-grids-flexbox
02-14
- "css-grids-flexbox-master"可能包含课程笔记、示例代码、练习文件等，帮助学习者深入理解并动手实践这两个布局技术。 通过深入学习和实践这些知识点，开发者能够构建更高效、更具响应性的网页布局，提升网页...
css-grid-vs-flexbox
03-25
CSS Grid布局系统是一种二维布局模型，适用于创建复杂的、网格状的页面结构。它允许你定义行和列，形成一个网格，并将内容精确地放置在这个网格的各个单元格中。Grid的关键特性包括： 1. **grid-template-columns/...
css-flexbox-grid-lab
03-21
《CSS Flexbox与Grid布局实验室探索》 在Web开发领域，CSS布局技术是构建网页界面不可或缺的部分。随着技术的发展，Flexbox（弹性盒布局）和Grid（网格布局）已经成为现代前端开发中的主流布局方式，极大地提高了...
CSS —— 盒子模型（Flexbox 布局方式）
热门推荐
ZhaoYLi 的编程学习笔记
05-11 1万+
目录 传统盒模型 Flexbox 布局方式 Flexbox 核心概念 Flex 容器属性 flex-direction ：项目元素排列的方向 flex-wrap ：项目元素排列方式 justify-content ： 项目在主轴上的对齐方式 align-items ：项目在交叉轴上的对齐方式 align-content ：多行项目的排列方式 Flex 项目属性 order ：项...
弹性盒子（Flexbox）模型——入门教程
weixin_48610566的博客
04-29 590
在学习时需注意，弹性盒子本质上也用的是div，两者区别在于后者将div的display变为了flex。
CSS学习（十二）-文本换行符
bwshqh的博客
03-12 5071
一、理论： 1.word-wrap: a.normal 在半角空格或连字符的地方进行换行 b.break-word 不截断英文单词换行 2.word-break: a.normal 中文到边界上的汉字换行，英文从整个单词换行 b.break-all 强行截断英文单词换行 c.keep-all 不允许字断开 3.while-space: a.normal 默认值 b.pre 文本
CSS学习（六）-css圆角边框高级效果、边框阴影效果（上）
bwshqh的博客
03-04 4675
一、理论： 1.border-radius: a.表格应用圆角:表格必须使用border-collapse属性为separate，表格圆角才能正常显示 b.圆形:元素的宽度和高度相同，圆角的半径值50%(或高度的一半) c.半圆:元素的宽度与圆角方位配合一致，以不同的高度比例等项即可制作半圆 d.扇形:元素的宽度、高度、半径值相同，根据圆角位置不同可制作不同的扇形 e.椭圆:需要设置圆
CSS学习（十九）-CSS伸缩布局盒
bwshqh的博客
03-20 3193
一、理论： 1.flexbox模型基础知识 a.flexbox布局方向不可预知 b.屏幕和浏览器窗口大小发生改变可以灵活调整布局 c.指定伸缩项目可以按主轴或者侧轴按比例分配额外空间 d.指定伸缩项目沿主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间 e.指定如何将垂直元素布局轴的额外空间分布到该元素周围 f.控制元素在页面上的布局方向 g.按照不同于DOM所指定的方式
CSS学习（十五）-CSS颜色模式、CSS颜色透明度
bwshqh的博客
03-16 3181
一、理论： 1.CSS3颜色模式 a.RGBA颜色模式，在RGB基础上加了控制alpha透明度的参数 b.HSL颜色模式：色调 饱和度 亮度 c.HSLA颜色模式：A值取于0-1之间，值越大，透明度越低 2.RGBA/HSLA滤镜格式 a.需要用转换工具才能在ie8及以下版本中使用RGBA/HSLA颜色模式相同的透明度，需要将RGBA/HSLA中的透明值乘以255，然后将其转换成十六进
CSS学习（十八）-滚动条、拖动元素、轮廓线
bwshqh的博客
03-19 3075
一、理论： 1.overflow-x/overflow-y a.visible 默认值,不添加滚动条 b.auto 添加滚动条 c.hidden 内容溢出容器时，所有内容都将隐藏，不显示滚动条 d.scroll 不论有无溢出，都显示滚动条 e.no-display 当内容溢出容器时不显示元素 f.no-content 当内容溢出容器时不显示内容 2.resize a.none 用
CSS学习（十三）-文本换行符技巧
bwshqh的博客
03-12 2272
一、理论： 1.word-wrap 用来断词而不是断字符 2.word-break: a.break-all 可以允许非中文断开 b.keep-all 在中文里不允许字断开 2.white-space: a.nowrap 文本强制不换行 b.pre 显示预定义文本格式 3.浏览器适应： a.在ie下使用word-wrap:break-word声明可以确保所有文本正常显示 b.在
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可以让我们更加便捷地进行页面布局，同时也提高了页面的响应能力和可维护性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值