CSS（布局+flex布局）+HTML（二）

于 2024-07-16 20:59:20 发布
阅读量676 收藏 22
点赞数 20
分类专栏： HTML 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65450681/article/details/140475484
版权

目录

一、flex的介绍

1.什么是flex?

2.flex的使用

二、flex属性 

1. flex-direction属性

1）介绍

2）使用方法

2.flex-warp属性

1） 介绍

2）使用方法

3.  justify-content属性 

1）介绍

2）使用方法

4.  align-items属性

 1）介绍

2）使用方法

5.  align-content属性 

1）介绍

2）使用方法

三、结语

一、flex的介绍

1.什么是flex?

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

2.flex的使用

首先我们先来写一个无序列表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>VUE</li>
        <li>React</li>
    </ul>
</body>
</html>

然后为其添加css样式

 <style>
        *{
            //取消全局的margin和padding值
            margin: 0;
            padding: 0;
        }
        ul{
            //取消ul的默认样式
            list-style: none;
            //给其宽高
            width: 800px;
            height: 80px;
            //让其居中显示
            margin: 0 auto;
            
        }
        ul li{
            //给li背景颜色
            background-color: pink;
            //让文字垂直水平居中
            text-align: center;
            line-height: 80px;
            
        }
        ul li:hover{
            //添加鼠标划入以后的背景颜色
            background-color:rgba(255, 192, 203, 0.5);

        }
    </style>

然后我们就得到这样的效果，目前所有的文字都是垂直下来的，如果想让li横着过去的话那我们就需要用到flex布局

那么如何添加呢？

我们需要为父级也就是ul添加flex布局属性，其中我们在li上添加了一个flex为1的属性，是为了等分ul,效果如下

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 800px;
            height: 80px;
            margin: 0 auto;
            display: flex;
        }

        ul li {
            background-color: pink;
            text-align: center;
            line-height: 80px;
            flex: 1;
        }

        ul li:hover {
            background-color: rgba(255, 192, 203, 0.5);

        }
    </style>

 效果就变成这个样子：

二、flex属性 

1. flex-direction属性

1）介绍

flex-direction属性决定主轴的方向（即项目排列方向）

flex-direction: row（水平方向起点在左） | row-reverse（水平方向起点在右） | column（垂直方向起点在上） | column-reverse;（垂直方向起点在下

2）使用方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 850px;
            border: 1px solid pink;
            /* 让当前div.box成为flex容器 */
            display: flex;
            /*  flex-direction: column（垂直方向起点在上）这里我设置成垂直方向，大家可以试试                                    其他属性 */
            flex-direction: column;
           
        }
        .box>div{
             width: 200px;
             height: 200px;
             background-color: pink;
             margin: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
     
    </div>
</body>
</html>

运行结果如下，这里图片太大就只截图一半下面一样

2.flex-warp属性

1） 介绍

  flex-warp 换行 flex-wrap: nowrap (不换行)| wrap(换行，第一行在上方) | wrap-reverse(换行，第一行在下方); 

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

flex-flow: <flex-direction> <flex-wrap>;

2）使用方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 850px;
            border: 1px solid pink;
            /* 让当前div.box成为flex容器 */
            display: flex;                   
          
            flex-wrap: wrap;            
            flex-flow:  row wrap;

        }
        .box>div{
             width: 200px;
             height: 200px;
             background-color: pink;
             margin: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
     
    </div>
</body>
</html>

运行结果（博主使用的是flex-wrap: wrap; 属性大家可以自行尝试其他属性值，这里就不做过多展示）

3.  justify-content属性 

1）介绍

ustify-content属性定义了项目在主轴上的对齐方式。

  • flex-start（默认值）：左对齐
  • lex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  • space-evenly:flex项目之间的间隔以及项目与 flex 容器边缘之间的间隔都会是相等的。

2）使用方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 850px;
            border: 1px solid pink;
            /* 让当前div.box成为flex容器 */
            display: flex;   
            /* 这里使用的是center属性其他属性大家可以尝试使用*/
           justify-content: center;

        }
        .box>div{
             width: 200px;
             height: 200px;
             background-color: pink;
             margin: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
       
     
    </div>
</body>
</html>

 运行结果，我们可以看到现在两个盒子是水平居中显示的

4.  align-items属性

 1）介绍

align-items: flex-start | flex-end | center | baseline | stretch;

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2）使用方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 850px;
            height: 300px;
          
            border: 1px solid pink;
            /* 让当前div.box成为flex容器 */
            display: flex;   
            /* 这里使用的是flex-end的属性值，大家可以根据自己需求自行替换其他属性  */
           align-items: flex-end;

        }
        .box>div{
             width: 200px;
             height: 200px;
             background-color: pink;
             margin: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
       
     
    </div>
</body>
</html>

运行结果，这时我们可以看到粉色盒子在父级盒子的下方。

5.  align-content属性 

1）介绍

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

2）使用方法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 850px;
            height: 600px;
          
            border: 1px solid pink;
            /* 让当前div.box成为flex容器 */
            display: flex; 
            /* 这里我们允许换行 并且使用 align-content:space-between; 交叉轴两端对齐，轴线之间的间隔平均分布*/
            flex-wrap: wrap;  
            align-content:space-between;

        }
        .box>div{
             width: 200px;
             height: 200px;
             background-color: pink;
             margin: 5px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
       
     
    </div>
</body>
</html>

运行结果

三、结语

 目前这一节的flex布局先到此为止，下一节我们继续来看其他属性及其用法。

注：若作者博客其中有侵权内容，请及时与作者联系，会及时进行撤回更改

我们下一节再见~

辛-夷
关注
专栏目录
display flex 左右_css display:flex 属性
weixin_33387339的博客
02-01 2465
一：display:flex 布局display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align...
CSS（布局+flex布局）+HTML（一）
最新发布
weixin_65450681的博客
06-13 1023
布局（layout）即对事物的全面规划和安排，页面布局是对页面的文字、图像或表格进行格式化版式排列。网页布局对改善网站的外观非常重要，又称版式布局，大多数网站会把内容安排到多个列中，就像杂志或报纸那样，网页版面的设计延续了传统纸媒的特点，但又比传统的纸媒更灵活，传统的纸媒由于纸张大小的限制，只能在有限的空间内排列内容，而网页版面的布局，可以根据内容自适应宽度和高度。在 HTML 中，常使用 div 元素来创建多列，使用 CSS 对元素进行浮动、定位等，从而将网页设计稿中的布局样式呈现在网页上。
Html + Css 核心知识 - flex （超详细）
qq_61723274的博客
02-01 1870
Flex布局是一种用于创建灵活、。它提供了一种简单而强大的方式来对齐和分布元素，特别适用于构建响应式和移动端友好的布局。
超详细！弹性盒子(display:flex)
weixin_49602426的博客
08-20 1万+
一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你弹性盒子可以批量式的改变子元素的布局！那么弹性盒子用在什么地方比较合适呢：1.当一个盒子里的子元素需要垂直居中一个块的内容2.当盒子里所有的子元素占用等量的可用宽度/高度时。
弹性布局（display: flex）
2401_84341405的博客
04-27 5878
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap)-教案.zip
07-10
这个“Web前端技术项目式教程”将通过实例教学，使学习者掌握HTML5、CSS3、Flex布局和Bootstrap框架的使用，提升网页开发技能。教案中可能涵盖这些技术的实际应用、代码实践和项目案例分析，有助于理论与实践相结合...
Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap)-课后练习答案.zip
07-10
本教程主要涵盖了Web前端开发中的核心技术和框架，包括HTML5、CSS3、Flex布局以及Bootstrap框架，这些都是构建现代网页和应用程序不可或缺的元素。下面将详细阐述这些知识点。 **HTML5**： HTML5是超文本标记语言的...
前端网易云案例（网页版） html+css+flex布局
03-15
我相信大家在点进来的那一刻，那你一定学习前端有一段...这篇所有代码，逻辑，非常的规范，希望通过网易云音乐页面更好的帮助你，对所有的常用css属性和代码重构思维，flex布局方式，绝对定位相对定位有更好的认识！
Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap)-PPT课件.rar
06-29
Flexbox（Flexible Box布局模块）是CSS3的一个布局模式，专为处理复杂的单行或单列布局而设计。Flexbox允许开发者轻松地调整元素大小和位置，无论其内容如何变化。它通过flex属性（如flex-grow、flex-shrink和flex-...
百度新闻页面布局html+css
02-28
本教程将深入探讨“百度新闻页面布局”的HTML和CSS实现，旨在帮助初学者掌握页面布局的基本技巧，理解如何通过标签的使用来构建清晰、有效的新闻列表。 首先，HTML（HyperText Markup Language）是网页内容的结构化...
display:flex属性
weixin_46380993的博客
02-29 5万+
什么是display:flex？（我来自逆战班） Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。 1：先来了解一下display:flex 正常情况下 在一个盒子中，放置4个div，设置高度，宽度继承父元素，呈现如图排列方式，当我们给盒子加上display:flex时，再看一下 盒子内的4个div就...
display:flex；弹性布局
weixin_45786214的博客
12-09 1397
前言：文章是本人闲时所写，方便自己以后查阅，如若有幸被您阅读的话，备感荣幸，文章仅为个人理解，如内容有误还望告知，感谢！！！
弹性布局：display：flex
Owen的博客
02-22 329
1、flex的出现 网页布局是css的一个重要应用。布局的传统解决方案，基于盒模型，依赖于 display 属性、position 属性、float 属性。对于那些特殊的布局非常不方便，比如 垂直居中 就不容易实现。 所以提出了一种新的方案-flex布局，可以简便、完整、响应式地实现各种页面布局。 2、flex布局：display：flex； 任何一个容器都可以指定为flex布局 di...
display：flex布局
weixin_40544688的博客
08-20 341
关于flex布局，我觉得它在布局里简直就是一匹黑马，不愧为弹性布局 阮一峰大神有一篇博客，讲的超级详细 （http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）地址献上.... 下面来举例一下 我平时是什么场合派它上战场 1、左右居中 HTML &lt;div class="wrapper"&gt; &lt;d...
display:flex详解
Anony_me的博客
06-29 1万+
1. 属性指定了弹性子元素在父容器中的位置。2. 内容对齐（）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐3. 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。4. 属性用于指定弹性盒子的子元素换行方式。5. 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。6. 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。（1）flex-direction的值有: ：横向从左到右排
弹性布局(flex)从认识到使用让你一看就懂
Lan_0316的博客
04-27 1017
什么是弹性布局？弹性布局（Flex布局）是一种CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 13万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
css+flex布局
11-17
CSS3中的Flex布局是一种新的一维布局模式，它可以轻松地实现对齐、分布、对齐和重排元素。下面是一个简单的例子： ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` ```css .container { display: flex; justify-content: center; align-items: center; } .item { width: 100px; height: 100px; background-color: #ccc; margin: 10px; } ``` 在这个例子中，我们使用了一个包含三个子元素的容器。我们将容器的`display`属性设置为`flex`，这样它就成为了一个Flex容器。我们还使用了`justify-content`和`align-items`属性来控制子元素的对齐方式。在这个例子中，我们将它们都设置为`center`，这样子元素就会在容器的中心对齐。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值