弹性盒子布局 Flexbox Layout

news2024/11/18 1:25:19

在这里插入图片描述

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

在这里插入图片描述
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.coloradmin.cn/o/1509475.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ajax异步访问及跨域处理

ajax异步访问及跨域处理

文章目录 1 认识同步和异步1.1 什么是同步交互1.2 什么是异步交互 2 AJAX介绍3 案例开发之验证用户名4 JSON格式4.1 响应普通文本数据4.2 JSON的介绍和应用4.3 JSON 与 JS 对象的关系4.4 JSON 和 JS 对象互转4.5 GSON工具类的使用 5 AJAX结合jQuery实现5.1 jQuery.ajax()的简单…
阅读更多...
问题解决：NPM 安装 TypeScript出现“sill IdealTree buildDeps”

问题解决：NPM 安装 TypeScript出现“sill IdealTree buildDeps”

一、原因&#xff1a; 使用了其他镜像&#xff08;例如我使用了淘宝镜像 npm config set registry https://registry.npm.taobao.org/ &#xff09; 二、解决方法&#xff1a; 1.切换为原镜像 npm config set registry https://registry.npmjs.org 安装typescript npm i …
阅读更多...
vscode设置setting.json

vscode设置setting.json

{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 // "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式…
阅读更多...
java学习（集合）

java学习（集合）

一.集合(主要是单列集合和双列集合) 1.集合的框架体系&#xff08;两大类&#xff09; 2.collection接口是实现类的特点&#xff1a; 1)collection实现子类可以存放多个元素&#xff0c;每个元素可以是Object 2)有效Collection的实现类&#xff0c;可以存放重复的元素&#…
阅读更多...
交叉编译x264 zlib ffmpeg以及OpenCV等 以及解决交叉编译OpenCV时ffmpeg始终为NO的问题

交叉编译x264 zlib ffmpeg以及OpenCV等 以及解决交叉编译OpenCV时ffmpeg始终为NO的问题

文章目录 环境编译流程nasm编译x264编译zlib编译libJPEG编译libPNG编译libtiff编译 FFmpeg编译OpenCV编译问题1解决方案 问题2解决方案 总结 环境 系统&#xff1a;Ubutu 18.04交叉编译链&#xff1a;gcc-arm-10.2-2020.11-x86_64-aarch64-none-linux-gnu 我的路径/opt/toolch…
阅读更多...
解释“RNN encode-decode”

解释“RNN encode-decode”

“RNN encode-decode” 涉及使用循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;来执行编码和解码操作。这种结构常用于处理序列数据&#xff0c;例如自然语言处理、语音识别和时间序列预测等任务。 以下是 “RNN encode-decode” 的一般概念&a…
阅读更多...
week07day01(窗口函数)

week07day01(窗口函数)

一. 窗口函数的定义和一些规范&#xff1a; 对数据进行分区&#xff0c;数据的样式是不改变的&#xff0c;但是会多添加一列。窗口函数只能写在"结果集"中。 二. 排名函数 1. rank() over() 例题&#xff1a;对每个人的消费金额进行排名&#xff1a; rank() …
阅读更多...
基于Android的教学课程系统设计与开发

基于Android的教学课程系统设计与开发

摘 要 移动应用已经成为人们生活必不可缺的一部分&#xff0c;大学生身为移动应用的最大用户群体&#xff0c;在生活学习娱乐各个方面都与移动应用有着紧密联系&#xff0c;然而针对大学生校园学习的移动应用却寥寥无几&#xff0c;因为不同的学校&#xff0c;甚至不同的院系&…
阅读更多...
unity显示当前时间

unity显示当前时间

1建立文本组件和一个空对象 2创建一个脚本并复制下面代码 using System.Collections; using System.Collections.Generic; using TMPro; using UnityEngine;public class showtime: MonoBehaviour {public TextMeshProUGUI time;private void Update(){string currentTime Sy…
阅读更多...
抖音开放平台第三方开发，实现代小程序备案申请

抖音开放平台第三方开发，实现代小程序备案申请

大家好&#xff0c;我是小悟 抖音小程序备案整体流程总共分为五个环节&#xff1a;备案信息填写、平台初审、工信部短信核验、通管局审核和备案成功。 服务商可以代小程序发起备案申请。在申请小程序备案之前&#xff0c;需要确保小程序基本信息已填写完成、小程序至少存在一个…
阅读更多...
Clearview X for mac v3.5.0 电子书阅读器 兼容 M1/M2/M3

Clearview X for mac v3.5.0 电子书阅读器 兼容 M1/M2/M3

应用介绍 Clearview X 是 macOS 上的一款简洁易用且美观大方的电子书阅读器。直观好用的图书管理功能&#xff0c;支持 PDF, Epub, MOBI, CHM, FB2, CBR, CBZ 等流行的电子书格式&#xff0c;可以方便地添加注解&#xff0c;插入书签&#xff0c;及迅速的搜索查找。支持在不同…
阅读更多...
基于Springboot的高校竞赛管理系统（有报告）。Javaee项目，springboot项目。

基于Springboot的高校竞赛管理系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的高校竞赛管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…
阅读更多...
C#/WPF 清理任务栏托盘图标缓存

C#/WPF 清理任务栏托盘图标缓存

在我们开发Windows客户端程序时&#xff0c;往往会出现程序退出后&#xff0c;任务还保留之前程序的缓存图标。每打开关闭一次程序&#xff0c;图标会一直增加&#xff0c;导致托盘存放大量缓存图标。为了解决这个问题&#xff0c;我们可以通过下面的程序清理任务栏托盘图标缓存…
阅读更多...
深度学习_AlexNet_2

深度学习_AlexNet_2

目标 知道AlexNet网络结构能够利用AlexNet完成图像分类 2012年&#xff0c;AlexNet横空出世&#xff0c;该模型的名字源于论文第一作者的姓名Alex Krizhevsky 。AlexNet使用了8层卷积神经网络&#xff0c;以很大的优势赢得了ImageNet 2012图像识别挑战赛。它首次证明了学习到…
阅读更多...
安卓studio安装（从安装到配置到helloworld）

安卓studio安装（从安装到配置到helloworld）

安卓studio安装 2024.3.11官网的版本&#xff08;有些翻墙步骤下载东西也解决了&#xff09; 这次写的略有草率&#xff0c;后面会更新布局的&#xff0c;因为截图量太大了&#xff0c;有需要的小伙伴可以试着接受一下哈哈哈哈 !(https://gitee.com/jiuzheyangbawjf/img/raw/ma…
阅读更多...
【webrtc】m122：BitrateProber 源码阅读与分析

【webrtc】m122：BitrateProber 源码阅读与分析

pacing controller 需要 bitrate prober Pacing模块中存在一个BitrateProber prober_的成员变量，专门用来处理带宽探测 大神的分析也是基于最新版本webrtc的：ProbeController每次可能会生成多个探测源数据ProbeClusterConfig，其中每个源数据ProbeClusterConfig对应一个探测簇…
阅读更多...
软件杯 垃圾邮件(短信)分类算法实现 机器学习 深度学习

软件杯 垃圾邮件(短信)分类算法实现 机器学习 深度学习

文章目录 0 前言2 垃圾短信/邮件 分类算法 原理2.1 常用的分类器 - 贝叶斯分类器 3 数据集介绍4 数据预处理5 特征提取6 训练分类器7 综合测试结果8 其他模型方法9 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 垃圾邮件(短信)分类算…
阅读更多...
C++Qt学习——Qt信号槽

C++Qt学习——Qt信号槽

信号和槽是Qt编程的基础&#xff0c;他们的存在使得在Qt中处理界面各个组件的交互操作变得更加直观简单。信号&#xff08;SUGNAL&#xff09;&#xff1a;也就是发送者发送的函数信号&#xff0c;例如PushButtun最常见的信号就是鼠标单击的时候发射的click()信号槽&#xff08…
阅读更多...
华为配置ISP选路实现报文按运营商转发

华为配置ISP选路实现报文按运营商转发

CLI举例&#xff1a;配置ISP选路实现报文按运营商转发 介绍通过配置ISP选路实现报文按运营商转发的配置举例。 组网需求 如图1所示&#xff0c;FW作为安全网关部署在网络出口&#xff0c;企业分别从ISP1和ISP2租用一条链路。 企业希望访问Server 1的报文从ISP1链路转发&#…
阅读更多...
Python机器学习预测+回归全家桶，新增TCN，BiTCN，TCN-GRU，BiTCN-BiGRU等组合模型预测...

Python机器学习预测+回归全家桶，新增TCN，BiTCN，TCN-GRU，BiTCN-BiGRU等组合模型预测...

截止到本期&#xff0c;一共发了4篇关于机器学习预测全家桶Python代码的文章。参考往期文章如下&#xff1a; 1.机器学习预测全家桶-Python&#xff0c;一次性搞定多/单特征输入&#xff0c;多/单步预测&#xff01;最强模板&#xff01; 2.机器学习预测全家桶-Python&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023