CSS弹性盒模型flex在布局中的使用方法

作者：ataola | 来源：互联网 | 2020-09-16 03:40

传统盒子模型：一般的布局我们都是用的盒子模型，通过浮动定位来布局行元素、行内块元素不换行，块元素独占一行，利用浮动可以使块元素横排。但是某些特殊的布局，它们很难实现。比如垂直居中，所以我们就要用到弹性盒模型。

CSS弹性盒模型flex在布局中的应用

元素居中

【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items


    DEMO

【2】在伸缩项目上使用margin:auto


    DEMO

两端对齐


    DEMO
    DEMO
    DEMO    
    DEMO

底端对齐


    DEMO
    DEMO
    DEMO
    DEMO

输入框按钮

等分布局

多列自适应布局


    
        left
        left
                
    
        center
        center
                
    
        right
        right

悬挂布局


    左侧悬挂
    主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容

全屏布局

以上就是CSS弹性盒模型flex在布局中的应用的全部内容。

推荐阅读

php
解决 'view is not in the window hierarchy' 错误的方法

探讨并提供解决方案以应对 'view is not in the window hierarchy' 的错误提示。 ... [详细]

蜡笔小新 2024-11-26 20:15:22
php
MySQL: 表 'xdb.auditlog' 被标记为已损坏，需要修复

本文介绍了如何处理MySQL数据库中表 'xdb.auditlog' 被标记为已损坏的问题，并提供了解决方案。 ... [详细]

蜡笔小新 2024-11-26 19:50:06
usb
实现PopupWindow全屏显示并隐藏虚拟按键的方法

本文详细介绍了一种实现PopupWindow全屏显示且能有效隐藏虚拟按键的技术方案，适用于Android开发。此方法经过实际测试，表现良好，兼容性优秀。 ... [详细]

蜡笔小新 2024-11-26 15:35:31
get
BeautifulSoup4：Python的HTML/XML解析利器

BeautifulSoup4 是一个功能强大的HTML和XML解析库，它能够帮助开发者轻松地从网页中提取信息。本文将介绍BeautifulSoup4的基本功能、安装方法、与其他解析工具的对比以及简单的使用示例。 ... [详细]

蜡笔小新 2024-11-26 14:44:14
php
Spring Boot Maven 子模块独立打包指南

本文介绍了如何使用Maven命令对Spring Boot项目中的子模块进行独立打包，包括依赖树的查看、项目的运行和打包等基本操作。 ... [详细]

蜡笔小新 2024-11-26 14:40:02
php
深入理解异步多线程编程模型

现代计算机系统中的CPU通过并行处理提高效率，但所谓的并发处理实际上是一种基于轮询的模拟并行。本文探讨了现代处理器如何通过虚拟化技术实现更高的并发性能，以及在.NET框架中如何有效利用线程和异步编程模式。 ... [详细]

蜡笔小新 2024-11-26 14:10:16
get
深入理解 Boost Program Options

本文探讨了 Boost 库中的 Program Options 组件，这是一个强大的工具，用于解析命令行参数和配置文件。文章介绍了如何正确设置和使用该组件，包括处理复杂选项和负数值的方法。 ... [详细]

蜡笔小新 2024-11-26 14:04:31
php
Python 装饰器与装饰类详解

本文通过具体示例详细介绍了 Python 中的装饰器和装饰类的使用方法，包括带参数的装饰器和装饰类的应用场景。 ... [详细]

蜡笔小新 2024-11-26 13:53:48
get
解决 Pytest 运行时出现 FileNotFoundError 的方法

在使用 Pytest 进行测试时，可能会遇到 FileNotFoundError 错误，提示无法找到指定的文件或目录。本文将探讨该错误的原因及解决方案。 ... [详细]

蜡笔小新 2024-11-26 13:08:54
get
HDU1085 捕获本·拉登!

问题描述众所周知，本·拉登是一位臭名昭著的恐怖分子，他已失踪多年。但最近有报道称，他藏匿在中国杭州！虽然他躲在杭州的一个洞穴中不敢外出，但近年来他因无聊而沉迷于数学问题，并声称如果有人能解出他的题目，他就自首。 ... [详细]

蜡笔小新 2024-11-26 12:42:38
php
SpringBoot新手入门指南

本文旨在为初次接触SpringBoot的开发者提供一份详细的入门指导，包括如何快速搭建并运行一个简单的SpringBoot应用。通过本文，读者将了解Maven项目的构建、必要的配置文件设置以及基本的应用开发流程。 ... [详细]

蜡笔小新 2024-11-26 11:37:09
php
企业级贝斯OA与工作流系统视频解析 - J2EE+JBPM+Flex+jQuery技术栈

本视频详细介绍了如何利用J2EE、JBPM 3.x/4.3、Flex流程设计器、jQuery以及授权认证机制构建高效的企业普及版贝斯OA及工作流管理系统。 ... [详细]

蜡笔小新 2024-11-26 11:10:48
php
BL55072/BL55075 应用笔记

BL550721、特点液晶驱动输出：Common输出4线，Segment输出36线内置显示寄存器364144bit2线串行接口（SCL,SDA）内置震荡电路内置液晶驱动电源电路13 ... [详细]

蜡笔小新 2024-11-26 10:37:59
php
在Windows环境下安装FFTW并利用其库函数实现4096点FFT计算

本文介绍了如何在Windows操作系统中安装FFTW库，并详细说明了使用Visual Studio 2010进行4096点快速傅里叶变换（FFT）的步骤。包括下载预编译文件、生成库文件以及配置环境等关键环节。 ... [详细]

蜡笔小新 2024-11-26 09:26:23
php
javascript——对象的概念——函数 1 (函数对象的属性和方法)

一、创建函数函数是一种对象：Function类是对象，可以通过Function实例化一个函数，不过最多的还是利用function来创建函数。方式一：利用Function类来实例化函 ... [详细]

蜡笔小新 2024-11-26 00:19:46

ataola

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章