弹性盒子布局 Flexbox Layout

在这里插入图片描述

在这里插入图片描述
可以嵌套下去

在这里插入图片描述
1.display 属性
默认行排列

<style>
    .flex-item{
height: 20px;
    width: 10px;
    background-color: #f1f1f1;
    margin: 10px;
    }
   
  </style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>

此时是 列拍
在这里插入图片描述

<style>
    .flex-item{
height: 20px;
    width: 10px;
    background-color: #f1f1f1;
    margin: 10px;
    }
     .flex-container{
    display:flex;}  
  </style>

在这里插入图片描述

flex-direction属性——行布局 row
在这里插入图片描述
列布局：column
在这里插入图片描述

flex-wrap 属性 折叠在这里插入图片描述

flex-flow属性
包括 flex-direction 和flex-wrap

flex-flow: row wrap
行排列 折叠
在这里插入图片描述

justify-content属性 元素在主轴上的对齐方式在这里插入图片描述
左对齐 居中对齐 右对齐

在这里插入图片描述

两端对齐 拉手对齐

align-items属性 元素在辅轴上的对齐方式
在这里插入图片描述
上端对齐 居中对齐 底部对齐

align-items: stretch
注意：去掉元素高度

<style>
    .flex-container {
    display: flex; /* 转成flex格式*/
    justify-content: space-between; /*元素在主轴上的对齐 两端对齐 */
    flex-direction:row; /*行排列*/
    align-items:stretch; /*如果项目未设置高度或设为auto，将占满整个容器的高度。 */
    width:500px;
    height:200px;
    border:1px dashed;/* 虚线*/
    }
    .flex-item {
    width:100px;
    border:1px solid;
    font-size:20px}
  </style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

在这里插入图片描述

 <style>
    #flexbox{
    display:flex;
    justify-content:center;
    align-items:center;
    border:1px solid ;
flex-direction:row; /*行排列*/

width:200px;
    height:200px;
    }
    #flexitem{
    width:100px;
height:100px;
    border:1px solid red;
    background-color:red;
    }

flex-grow属性 元素被拉大的比例，按比例分配容器剩余空间 （1）默认值为0: 元素不占用剩余空间
（2）取值为n: 元素占据剩余空间若干份中的n 份

<style>
    .flex-container {
    display: flex; /* 转成flex格式*/

    flex-direction:row; /*行排列*/
    align-items:stretch; /*如果项目未设置高度或设为auto，将占满整个容器的高度。 */

    }
    .flex-item { border:1px solid black; }
    div:nth-child(1) { flex-grow:1; } /* 设置第一个项目比例为1份 */
    div:nth-child(2) { flex-grow: 1; } /* 设置第二个项目比例为1份*/
    div:nth-child(3) { flex-grow: 2; } /* 设置第三个项目比例为2份 */
  </style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
</body>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
   *{
	margin: 0;
	padding: 0;
}
    #container{
    margin:0 auto;
	width:500px;
	height:400px;
    }
    #header{
    display:flex;
    flex-direction:row;/* 行排列*/
    justify-content:center;/* 水平居中*/
    align-items:center;/* 垂直居中*/
    border:1px solid black;
    font-size:30px;
    color:white;
    background-color:purple;
    margin-bottom:5px;
    weight:500px;
    height:100px;}
    #main{
    margin-bottom:10px;
    weight:500px;
    }
    #left{
    display:flex;
    flex-direction:column;/* 垂直排列*/
    justify-content:center;/* 水平居中*/
    float:left; /* 左浮动*/
    width:240px;
    height:200px;
    margin-right:10px;
    background-color:#ccc;
    font-size:20px;
    }
    #right{
    display:flex;
    flex-direction:column;/* 垂直排列*/
    justify-content:center;/* 水平居中*/
    float:left; /* 左浮动*/
    width:240px;
    height:200px;

    background-color:#ccc;
    font-size:20px;
    }
     #footer{
    display:flex;
    flex-direction:column;/* 垂直排列*/
    justify-content:center;/* 水平居中*/
float:left; /* 左浮动*/
    width:490px;
    height:100px;
    margin-top:10px;
    background-color:#ccc;
    font-size:20px;
    }

    p{font-size:15px; margin-top:10px; }
  </style>
</head>
<body>
<div id="container">
  <div id="header">web前端开发
  </div>
  <div id="main">
    <div id="left">HTML<p>超文本标记语言，用于构建网页结构，定义网页包括的内容.</p></div>
    <div id="right">CSS <p>层叠样式表，用于构建网页布局，外观，美化页面</p></div>
  </div>
  <div id="footer">JavaScript <p>JavaScripe,脚本语言，用于构建网页行为，与用户进行交互，使用户获得更好的体验</p></div>
</div>
</body>

这是用flex布局写得 更简单点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 整体容器样式 */
        #container {
            margin: 0 auto;
            width: 500px;
            height: 400px;
            display: flex;
            flex-direction: column;/*垂直方向为列布局*/
            align-items: center;/*  在主轴方向（垂直方向）上居中对齐容器内部元素 */
        }

        /* 顶部标题样式 */
        #header {
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;  /* 垂直居中对齐*/
            border: 1px solid black;
            font-size: 30px;
            color: white;
            background-color: purple;
            margin-bottom: 5px;
        }

        /* 主体内容区样式 */
        #main {
            display: flex;
            justify-content: space-between; /*两端对齐*/
            width: 100%;
            margin-bottom: 10px;
        }

        /* 左侧内容块样式 */
        #left {
            flex: 1; /*flex-grow, flex-shrink, 和 flex-basis*/
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 240px;
            height: 200px;
            margin-right: 10px;
            background-color: #ccc;
            font-size: 20px;
        }

        /* 右侧内容块样式 */
        #right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 240px;
            height: 200px;
            background-color: #ccc;
            font-size: 20px;
        }

        /* 底部内容样式 */
        #footer {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: 10px;
            background-color: #ccc;
            font-size: 20px;
            height: 100px;
        }

        p {
            font-size: 15px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="container">
    <!-- 顶部标题 -->
    <div id="header">web前端开发
    </div>
    <!-- 主体内容区 -->
    <div id="main">
        <!-- 左侧内容块 -->
        <div id="left">HTML<p>超文本标记语言，用于构建网页结构，定义网页包括的内容.</p></div>
        <!-- 右侧内容块 -->
        <div id="right">CSS <p>层叠样式表，用于构建网页布局，外观，美化页面</p></div>
    </div>
    <!-- 底部内容 -->
    <div id="footer">JavaScript <p>JavaScripe,脚本语言，用于构建网页行为，与用户进行交互，使用户获得更好的体验</p></div>
</div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/458677.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

如何实现固定公网地址远程SSH连接Linux Deepin系统

如何实现固定公网地址远程SSH连接Linux Deepin系统

文章目录 前言1. 开启SSH服务2. Deppin安装Cpolar3. 配置ssh公网地址4. 公网远程SSH连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 前言 Deepin操作系统是一个基于Debian的Linux操作系统&#xff0c;专注于使用者对日常办公、学习、生活和娱乐的操作体验的极致&#xff0…
阅读更多...
探索数据结构：双向链表的灵活优势

探索数据结构：双向链表的灵活优势

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 贝蒂的主页&#xff1a;Betty’s blog 1. 前言 前面我们学习了单链表&#xff0c;它解决了顺序表中插入删除需…
阅读更多...
第110讲：Mycat实践指南：指定Hash算法分片下的水平分表详解

第110讲：Mycat实践指南：指定Hash算法分片下的水平分表详解

文章目录 1.应用指定Hash算法分片的概念2.使用应用指定Hash算法分片对某张表进行水平拆分2.1.在所有的分片节点中创建表结构2.2.配置Mycat实现应用指定Hash算法分片的水平分表2.2.1.配置Schema配置文件2.2.2.配置Rule分片规则配置文件2.2.3.配置Server配置文件2.2.4.重启Mycat …
阅读更多...
什么牌子的蓝牙耳机质量好？2024年精选机型，真实体验分享

什么牌子的蓝牙耳机质量好？2024年精选机型，真实体验分享

​对于新手来说&#xff0c;真无线蓝牙耳机的选购可能显得有些复杂。网络上有许多关于蓝牙耳机品牌、音质、舒适度的讨论。我整理了五款佩戴舒适且音质表现不错的真无线蓝牙耳机&#xff0c;希望能为你提供有价值的参考&#xff0c;不要错过哦&#xff01; 一、蓝牙耳机选购技巧…
阅读更多...
训练YOLOv8m时AMP显示v8n

训练YOLOv8m时AMP显示v8n

在训练Yolov8模型时&#xff0c;使用AMP&#xff08;Automatic Mixed Precision&#xff09;可以加速训练过程并减少显存的使用。AMP是一种混合精度训练技术&#xff0c;它通过将模型参数的计算转换为低精度&#xff08;如半精度&#xff09;来提高训练速度&#xff0c;同时保持…
阅读更多...
es 分词器详解

es 分词器详解

基本概念 分词器官方称之为文本分析器&#xff0c;顾名思义&#xff0c;是对文本进行分析处理的一种手段&#xff0c;基本处理逻辑为按照预先制定的分词规则&#xff0c;把原始文档分割成若干更小粒度的词项&#xff0c;粒度大小取决于分词器规则。 分词器发生的时期 1、分词…
阅读更多...
pytorch之诗词生成6--eval

pytorch之诗词生成6--eval

先上代码&#xff1a; import tensorflow as tf from dataset import tokenizer import settings import utils# 加载训练好的模型 model tf.keras.models.load_model(r"E:\best_model.h5") # 随机生成一首诗 print(utils.generate_random_poetry(tokenizer, model)…
阅读更多...
微信公众号测试号里面显示若依前端页面

微信公众号测试号里面显示若依前端页面

内网穿透 注册购买内网穿透隧道 https://natapp.cn/ 启动成功 这样就绑定你的本地启动项目 微信公众测试号配置 注册微信公众号测试号 获取access_token&#xff0c;AppID与appsecret 调用微信官方接口生成access_token&#xff08;AppID和AppSecret可在“微信公众平台-设置…
阅读更多...
C++ STL库的基本用法

C++ STL库的基本用法

目录 vector set queue priority_queue(堆)优先队列 大根堆 小根堆 map unordered_map vector vector<int> heap;//一维数组 for(int i1;i<10;i){heap.push_back(i); } heap.push_back();//元素插入尾部 heap.pop_back();//弹出尾部元素 heap.empty();// 判…
阅读更多...
StarRocks——滴滴的极速多维分析实践

StarRocks——滴滴的极速多维分析实践

背景 滴滴集团作为生活服务领域的头部企业&#xff0c;其中橙心优选经过一年多的数据体系建设&#xff0c;逐渐将一部分需要实时交互查询&#xff0c;即席查询的多维数据分析需求由ClickHouse迁移到了StarRocks中&#xff0c;接下来以StarRocks实现的漏斗分析为例介绍StarRocks…
阅读更多...
kafka 管理工具 Offset Explorer 使用

kafka 管理工具 Offset Explorer 使用

一、连接 二、查询数据 三、插入测试数据
阅读更多...
突飞猛进，智能饮品机器人如何助力实体经济？

突飞猛进，智能饮品机器人如何助力实体经济？

近日&#xff0c;财务部公布了2024年第一季度及全年财报。数据显示&#xff0c;连锁品牌增长速度惊人&#xff0c;这其中不得不提到智能饮品机器人的使用&#xff0c;为不同的品牌门店拼速度、抢点位立下了不小的功劳&#xff0c;那么智能饮品机器人到底如何助力各门店&#xf…
阅读更多...
工作中Git如何切换远程仓库地址

工作中Git如何切换远程仓库地址

工作中Git如何切换远程仓库地址 部门之前的仓库不用了&#xff0c;重新建了一个仓库&#xff0c;但是上传代码还是上传到了之前的仓库里面了&#xff0c;所以得进行修改&#xff0c;下面将修改地址的方法进行操作。 方法一、直接修改远程仓库地址 查看当前远程仓库地址 git …
阅读更多...
LLM - 大语言模型(LLM) 概述

LLM - 大语言模型(LLM) 概述

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/136617643 大语言模型(LLM, Large Language Model)的发展和应用是一个非常广泛的领域&#xff0c;涉及从早期的统计模型到现代基于深度学…
阅读更多...
Bugku MISC做题笔记

Bugku MISC做题笔记

简单套娃DX 这一题需要对png图片的结构有所了解。详细可参考https://www.w3.org/TR/png/ 幸好每一张图片只有一个错误&#xff0c;逐步调试&#xff0c;就可以发现所有错误&#xff0c;修正即可。具体错误参看python程序中的注释&#xff1a; import ossrc_dir .\\XD\\ de…
阅读更多...
鸿蒙开发（八）添加常用控件（下）

鸿蒙开发（八）添加常用控件（下）

添加控件的文章分成了上下两篇&#xff0c;上篇介绍了文本显示、文本输入、按钮、图片、单选框、切换按钮这六种常用控件&#xff0c;本篇继续介绍其他几种很重要但略微复杂的控件。 鸿蒙系列上一篇&#xff1a; 鸿蒙开发&#xff08;七&#xff09;添加常用控件&#xff08;…
阅读更多...
【数据结构】串 解析+完整代码（求子串、比大小、定位操作）

【数据结构】串 解析+完整代码（求子串、比大小、定位操作）

1.串的实现 1.1 串的定义 定义 串&#xff0c;即字符串&#xff0c;是由零个或多个字符组成的有限序列。 串是一种特殊的线性表&#xff0c;数据元素间呈线性关系。 空串&#xff1a;串长度为0时&#xff1b;子串&#xff1a;串中任意个连续的字符组成的子序列&#xff1b;主串…
阅读更多...
ConcurrentHashMap 为什么不能插入 null？

ConcurrentHashMap 为什么不能插入 null？

1、典型回答 简单来说&#xff0c;ConcurrentHashMap 不允许插入 null 值是JDK 源码规定的&#xff0c;如下源码所示(此源码基于JDK 1.8)&#xff1a; 从上述源码可以看出&#xff0c;在添加方法的第一句就加了判断&#xff1a;如果 key 值为 null 或者是 value 值为 null&…
阅读更多...
Spring Cloud Alibaba微服务从入门到进阶（一）（SpringBoot三板斧、SpringBoot Actuator）

Spring Cloud Alibaba微服务从入门到进阶（一）（SpringBoot三板斧、SpringBoot Actuator）

Springboot三板斧 1、加依赖 2、写注解 3、写配置 Spring Boot Actuator Spring Boot Actuator 是 Spring Boot 提供的一系列用于监控和管理应用程序的工具和服务。 SpringBoot导航端点 其中localhost:8080/actuator/health是健康检查端点&#xff0c;加上以下配置&#xf…
阅读更多...
基于PHP构建的HTML5点餐系统的设计13.91

基于PHP构建的HTML5点餐系统的设计13.91

随着互联网时代的发展&#xff0c;人们的生活方式正在发生改变。传统的餐饮行业也正在发生变革。人们不再满足过去的点餐方式&#xff0c;需要更好的体验。本课题旨在结合点餐系统的技术优势&#xff0c;设计一个能够方便顾客与商家&#xff0c;并且节约人力成本以及可以很好地…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站