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

最新推荐文章于 2022-03-01 21:59:53 发布
最新推荐文章于 2022-03-01 21:59:53 发布
阅读量397 收藏 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>

在这里插入图片描述

杏黄的三叶草
关注
专栏目录
html 伸缩盒子布局,详解CSS3伸缩布局盒模型Flex布局
weixin_42127937的博客
06-17 2062
一、Flex 布局是什么？CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局(Flexible Box)模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其 宽度 、 高度 、 顺序 ，以最佳的方式填充可用空间。Flex容器会使子项目...
Flex弹性布局详解
09-29
### Flex弹性布局详解 #### 一、引言 随着网页设计和开发的不断发展，Web开发者们不断寻求更高效、更灵活的方式来布局网页内容。2009年，W3C提出了Flex布局规范，这是一种用于创建可伸缩和响应式用户界面的新方法...
弹性布局做导航
TravelAlone的博客
08-23 2451
弹性布局做导航主要用到的属性 { 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 311
妙味的官网和智能社的官网上，会看到一个带弹性的导航栏，这个导航栏的效果非常流畅，其实这个效果并不难实现，说一下思路：正常的导航栏布局，只是在第一个li前加一个div，设置定位为绝对定位，并给div设置背景，设置其z-index值为1，设置li的z-index值为2，设置其父元素ul为相对定位，li设置成相对定位，li如果不设置成相对定位，会出现z-index失效的麻烦，然后用js调节背景...
Web实现：flex弹性布局导航条案例调整水平方向的分布
jasmyn518的博客
03-01 440
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 306
伸缩布局(弹性布局|伸缩盒子) ★为父元素设置 1. display:flex 父元素变为伸缩盒子 display:flex --子元素就会变成伸缩项 2. justify-content 设置子元素在主轴(X轴)方向的排列方式 flex-start --> 从主轴的开始方向开始排列 默认值 flex-end --> 从主轴的结束方向开始排列 center ...
flex 伸缩盒子，使用范例（子元素在侧轴对齐方式align-items；单个元素，在侧轴对齐方式align-self）
xqiitan的专栏
03-13 1491
根据服务器返回条目，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
详解CSS3伸缩布局盒模型Flex布局
09-22
在Flex布局中，一个容器通过设置`display`属性为`flex`或`inline-flex`变为Flex容器。容器的所有直接子元素自动成为Flex项目。`display: flex`使得容器成为块级Flex容器，而`display: inline-flex`则创建一个行内...
CSS3伸缩布局盒模型Flex布局详解
详解CSS3伸缩布局盒模型Flex布局 Flex布局是CSS3引入的一种新的布局模式，即伸缩盒模型布局（FlexibleBox）模型。用来提供一个更加有效的方式确定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态...
Flex 布局教程：语法篇
leon-这个程序员不闷骚的博客
06-27 8306
网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就
css3伸缩布局（附实例、图解）
weixin_45135068的博客
08-01 1057
目录 justify-content 调整主轴对齐（水平） align-items 调整侧轴对齐（垂直）单行比较多 flex-wrap控制是否换行 flex-flow是flex-direction、flex-wrap的简写形式 align-content堆栈（由flex-wrap产生独立行）对齐 order控制子盒子的排列顺序 正文 伸缩布局用法： 1，给父盒子添加伸缩布局模式 section { /* 父级盒子添加flex */ display: fle
伸缩盒(flex布局)
极简
06-29 972
一、属性 flex 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。 flex-grow 扩展比率 flex-shrink 收缩比率 flex-basis 伸缩基准值 flex-flow 排列方式 flex-direction 排列方向 flex-wrap 该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向 align-content 对齐方式 align-items
Flex弹性布局 部分元素被挤压的解决方法
热门推荐
小草莓的博客
07-15 1万+
解决方法很简单， 就是使用 flex-shrink 属性； flex-shrink 属性定义了项目的缩小比例，默认为1 即如果空间不足，该项目将缩小，它还有另外一个值，就是0 如果在子元素的 css 样式中添加 flex-shrink 属性， 然后把值改为 0 flex-shrink：0 ，那么当前元素就不会被其他子元素挤压 ...
FLex布局实现导航
qq_24192465的博客
08-09 3254
一、要点 1、display: flex; 2、justify-content: center; 3、align-items: center; 4、justify-content: space-between; 5、width: calc((100% - 1336px)*0.57); 二、部分代码 1、html                    
Flex布局应用---导航栏实现
wind的博客
12-30 4660
实现效果： html： <!-- 局部导航栏 --> <ul class="local-nav"> <li> <a href="#" title="攻略景点"> <span class="local-nav-icon1"></span> <span>攻略景点</span> &l
Flex伸缩盒子的实操+详解
weixin_44743508的博客
06-22 342
Flex伸缩盒子的实操+详解 Flex布局能够针对CSS重难以实现的的类似：垂直居中、线轴排序、交叉轴对齐等进行封装。我们就可以简便、完整、响应式地实现各种页面布局 一、 flex-direction属性 flex-direction属性决定主轴的方向（即项目的排列方向）。 它含有四个值，分别是： row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 首
flex布局写简单的左logo、右导航
weixin_45803990的博客
09-08 897
justify-content 属性 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 justify-content 语法如下： justify-content: flex-start | flex-end | center | space-between | space-around space-between： 弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值