伸缩布局详解【弹性布局】(flex)以及用flex写一个伸缩导航

最新推荐文章于 2022-03-01 21:59:53 发布
最新推荐文章于 2022-03-01 21:59:53 发布
阅读量371 收藏 1
点赞数
分类专栏： Web前端CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dwjdj/article/details/104118142
版权

伸缩布局

1.首先给子元素的直接父元素设置伸缩盒子

display:flex;

2.当父元素为伸缩盒子时，默认子元素在一行上显示
3.伸缩盒子的特点：
◆如果一个盒子变成为伸缩盒子，那么该盒子就具有了两条轴，一条是主轴，一条是侧轴。主轴的默认方向是水平从左向右，侧轴始终要垂直于主轴。
◆子元素是按照主轴的方向显示的。

设置主轴的方向

/*设置主轴的方向。默认为水平从左向右row*/
            flex-direction: row;

在这里插入图片描述

 flex-direction: row-reverse;

在这里插入图片描述

flex-direction: column;

在这里插入图片描述

flex-direction: column-reverse;

在这里插入图片描述

总结：
1.由于在伸缩盒子中子元素是按照主轴的方向显示的，因此我们改变了主轴的方向，子元素的位置也会发生改变
2.主轴的方向发生改变后，侧轴的方向也会随之发生改变

设置子元素在主轴的对齐方式

默认对齐方式
justify-content: flex-start;

在这里插入图片描述

justify-content: flex-end;

在这里插入图片描述

 justify-content: center;

在这里插入图片描述

justify-content: space-between;

在这里插入图片描述

justify-content: space-around;

在这里插入图片描述

总结：
◆通过设置该属性，只是改变了子元素在主轴方向的对齐方式，而元素自己本身的位置并没有改变

设置子元素在侧轴的对齐方式

align-items: flex-start;

在这里插入图片描述

align-items: flex-end;

在这里插入图片描述

 align-items: center;

在这里插入图片描述

子元素在侧轴的对齐方式
align-items: stretch;
子元素没有设置高度

在这里插入图片描述

总结：
◆在伸缩盒子中，子元素可以不用设置高度，如果不设置高度，那么该子元素的高度等于其父元素的高度，所以子元素在侧轴是拉伸的效果

设置伸缩盒子是否允许子元素换行

在伸缩盒子中，如果子元素的宽度超出了父元素的宽度，那么子元素不会换行显示。
设置子元素换行显示：
 /*设置子元素在父元素中是否换行显示*/
            flex-wrap: nowrap;

在这里插入图片描述

 /*子元素可以换行显示*/
            flex-wrap:wrap;

在这里插入图片描述

设置子元素换行后的对齐效果

/*设置子元素换行后的对齐效果*/
            align-content: flex-start;

在这里插入图片描述

align-content: flex-end;

在这里插入图片描述

align-content: center;

在这里插入图片描述

align-content: space-around;

在这里插入图片描述

align-content: space-between;

在这里插入图片描述

align-content: stretch;

在这里插入图片描述

总结：
◆该属性设置的前提是必须保证是换行后的元素

伸缩盒子中子元素的相关属性

◆flex:设置子元素占父元素剩下宽度的比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            /*将父元素设置为伸缩盒子*/
            display: flex;
            /*设置主轴的方向。默认为水平从左向右row*/
            /*flex-direction: row;*/
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/

            /*设置子元素在主轴的对齐方式，默认flex-start*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: center;*/
            /*justify-content: space-between;*/
            /*justify-content: space-around;*/

            /*设置子元素在侧轴的对齐方式*/
            /*align-items: flex-start;*/
            /*align-items: flex-end;*/
            /*align-items: center;*/
            /*align-items: stretch;*/

            /*设置子元素在父元素中是否换行显示*/
            /*flex-wrap: nowrap;*/
            /*子元素可以换行显示*/
            flex-wrap:wrap;

            /*设置子元素换行后的对齐效果*/
            /*align-content: flex-start;*/
            /*align-content: flex-end;*/
            /*align-content: center;*/
            /*align-content: space-around;*/
            /*align-content: space-between;*/
            /*align-content: stretch;*/
        }
        .box>div{
            margin: 3px;
        }
        .one{
           flex: 1;
            height: 100px;
            background-color: #000000;
        }
        .two{
            /*width: 100px;*/
            height: 100px;
            flex: 1;
            background-color: red;
        }
        .three{
            flex: 1;
            /*width: 100px;*/
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
</body>
</html>

在这里插入图片描述
◆order:排序
◆不需要改变HTML结构中的位置，就可以实现在页面中调换元素的显示位置
◆order的取值越大，那么该元素在页面中的显示位置就越靠后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            /*将父元素设置为伸缩盒子*/
            display: flex;
            /*设置主轴的方向。默认为水平从左向右row*/
            /*flex-direction: row;*/
            /*flex-direction: row-reverse;*/
            /*flex-direction: column;*/
            /*flex-direction: column-reverse;*/

            /*设置子元素在主轴的对齐方式，默认flex-start*/
            /*justify-content: flex-start;*/
            /*justify-content: flex-end;*/
            /*justify-content: center;*/
            /*justify-content: space-between;*/
            /*justify-content: space-around;*/

            /*设置子元素在侧轴的对齐方式*/
            /*align-items: flex-start;*/
            /*align-items: flex-end;*/
            /*align-items: center;*/
            /*align-items: stretch;*/

            /*设置子元素在父元素中是否换行显示*/
            /*flex-wrap: nowrap;*/
            /*子元素可以换行显示*/
            flex-wrap:wrap;

            /*设置子元素换行后的对齐效果*/
            /*align-content: flex-start;*/
            /*align-content: flex-end;*/
            /*align-content: center;*/
            /*align-content: space-around;*/
            /*align-content: space-between;*/
            /*align-content: stretch;*/
        }
        .box>div{
            margin: 3px;
        }
        .one{
           /*flex: 1;*/
            width: 100px;
            order: 1;
            height: 100px;
            background-color: #000000;
        }
        .two{
            width: 100px;
            height: 100px;
            /*flex: 1;*/
            background-color: red;
            order: 2;
        }
        .three{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
</body>
</html>

在这里插入图片描述

伸缩导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 960px;
            height: 60px;
            background-color: #ccc;
            margin: 100px auto;
            border-radius: 5px;
            overflow: hidden;
        }
        .box ul{
            display: flex;
        }
        .box li{
            flex: 1;
            line-height: 60px;
            display: flex;
            text-align: center;
        }
        .box a{
            flex: 1;
            text-decoration: none;
        }
        a:hover{
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">首页</a>
        </li>
        <li>
            <a href="#">联系我们</a>
        </li>
        <li>
            <a href="#">博客之星</a>
        </li>
        <li>
            <a href="#">VIP专栏</a>
        </li>
        <li>
            <a href="#">下载</a>
        </li>
        <li>
            <a href="#">论坛</a>
        </li>
        <li>
            <a href="#">问答</a>
        </li>
        <li>
            <a href="#">活动</a>
        </li>
        <li>
            <a href="#">更多</a>
        </li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

杏黄的三叶草
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS3伸缩布局盒模型Flex布局
09-22
主要介绍了详解CSS3伸缩布局盒模型Flex布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
弹性布局做导航
TravelAlone的博客
08-23 2364
弹性布局做导航主要用到的属性 { display:flex}和{justify-content: space-around;}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no
带弹性的导航栏
weixin_30448603的博客
05-26 287
妙味的官网和智能社的官网上，会看到一个带弹性的导航栏，这个导航栏的效果非常流畅，其实这个效果并不难实现，说一下思路：正常的导航栏布局，只是在第一个li前加一个div，设置定位为绝对定位，并给div设置背景，设置其z-index值为1，设置li的z-index值为2，设置其父元素ul为相对定位，li设置成相对定位，li如果不设置成相对定位，会出现z-index失效的麻烦，然后用js调节背景...
Web实现：flex弹性布局导航条案例调整水平方向的分布
jasmyn518的博客
03-01 377
HTML部分： <!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" />
弹性布局(伸缩布局)
denghuocc
04-25 277
伸缩布局(弹性布局|伸缩盒子) ★为父元素设置 1. display:flex 父元素变为伸缩盒子 display:flex --子元素就会变成伸缩项 2. justify-content 设置子元素在主轴(X轴)方向的排列方式 flex-start --> 从主轴的开始方向开始排列 默认值 flex-end --> 从主轴的结束方向开始排列 center ...
flex 伸缩盒子，使用范例（子元素在侧轴对齐方式align-items；单个元素，在侧轴对齐方式align-self）
xqiitan的专栏
03-13 1462
根据服务器返回条目，N个菜单平分标题栏宽度。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;flex：伸缩菜单&lt;/title&gt; &lt;style&gt; * { margin: 0; padd
【移动端网页布局】Flex 弹性布局案例 ③
03-06
【移动端网页布局】Flex 弹性布局案例 ③
css Flex布局的可伸缩性(Flexibility)
09-24
主要介绍了css Flex布局的可伸缩性(Flexibility)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS弹性盒模型flex在布局中的应用详解
01-19
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用 元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items JavaScript Code复制内容到剪贴板 <style&...
过渡属性transition详解
dwjdj的博客
01-28 9188
一般transition属性设置在默认状态中。 ☞ 过渡属于一种特殊的动画 ☞ 通过一种状态向另外一种状态的改变 transition-property属性： 用于指定过渡效果的CSS属性的名称，其过渡效果通常在用户将鼠标移动到元素上时发生 transition:none|(没有属性会获得过渡效果) all|(所有属性获得过渡效果) property(过...
CSS之行高(line-height)详解
dwjdj的博客
01-20 4662
行高(line-height)        1.浏览器中默认文字大小为16px;        2.浏览器中默认文字行高为18px； 行高=文字大小+上下间距        1.通过设置文字的行高，改变的就是文字的上下间距。       &nbsp...
动画(animation)属性详解
dwjdj的博客
01-29 2700
定义动画： 1.通过@keyframas+自定义动画名称{} 2.在动画集中通过from和to设置动画的开始和结束状态 @keyframes move{ from{ opacity:0; } to{ opacity:1; } } 也可以用0%代替from，100%代替to 注意： ◆动画集要单独定义，不能放到类样式中 animation-name属性： 用于定义@k...
网页布局中图片垂直对齐方式详解(四种)
dwjdj的博客
01-31 2631
方式一 参照文字的中线对齐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ m...
CSS控制表格边框(属性)以及实现细线表格
dwjdj的博客
01-21 2547
CSS控制表格边框 可以为表格标签定义宽，高和边框样式，并为单元格单独设置相应的边框。如果只设置
定位(position)详解以及其应用情况(可以取负值)【小米案例】
dwjdj的博客
01-24 2172
静态定位 1.静态定位是标签的默认定位方式，即各个标签在HTML文档流中的默认位置。 2.在静态定位状态下，无法通过边偏移属性(top,bottom,left,right)改变标签位置 3.一般我们需要将固定定位或者绝对定位以及其他定位转化为标准流下的元素时，我们需要将该元素设置为静态定位即可。 position:static; 绝对定位 position:absolute; left:20px...
盒子模型（div标签）以及其属性
dwjdj的博客
01-21 2080
盒子模型（div标签） 作用： 用于网页布局[画盒子] 组成： 内容区域 边框 内边距：内容区域与边框之间的距离 外边距：盒子与盒子之间的距离 盒子模型相关属性 边框属性（border） 设置边框的样式(没有|实线|点线|虚线|双实线) border-style:none(默认)|solid|dotted|dashed|double; 设置边框宽度 border-width:~~px; 设置边框...
Web字体(【iconfont.cn】引用在线字体)@font-face属性的使用以及字体格式详解
dwjdj的博客
01-27 1741
服务器字体的设置： ✔引用在线字体。（了解） ✔下载到本地使用（推荐） @font-face是CSS3新增的属性，用于定义服务器字体。通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体，规则如下： @font-face{ font-family:字体名称； src:字体路径； } iconfont.cn网站里面的字体只能针对当前显示的字体设置，要想设置想要的字体...
定位层级关系(Z-index标签层叠)详解以及标签包含规范
dwjdj的博客
01-24 1728
定位层级关系(Z-index标签层叠) 当对多个标签设置定位时，定位标签之间有可能会发生重叠，要想改变重叠的顺序，可以对定位标签应用z-index属性，取值可取正整数，负数和0，默认状况下z-index属性值为0，并且取值越大，设置该属性的定位标签在层叠标签中越居上。 ☞ 只有定位（静态定位除外）的元素才有层级关系 ☞ 通过z-index属性去设置（改变）元素的层级关系 ☞ 默认的z-index:...
CSS的书写方式及基础知识
dwjdj的博客
01-18 1249
CSS基础 css的整体 1.选择器 2.盒子模型 3.浮动 4.定位 5.动画，伸缩布局(CSS3部分) CSS概念 作用： 1.美化网页(通过CSS控制标签的样式) 2.网页布局(通过CSS控制标签的位置) 概念 Cascading Style Sheets(层叠样式表|级联样式表|样式表) 注意：CSS是以HTML为基础。 书写方式： 内嵌式 1.先准备一个HTML页面 2.在HTML页面内...
flex（伸缩盒）布局技术
最新发布
05-08
Flex布局是CSS3中的新功能，它是一种用于页面布局的模式，可以实现页面内元素的自适应排列和对齐方式的控制。通过对容器及其子元素的属性设置，实现灵活的盒模型布局。Flex布局技术主要包括以下几个方面： 1. 容器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值