CSS中的flex布局 css flex布局实例
yuyutoo 2024-10-25 19:19 14 浏览 0 评论
CSS中的flex布局
一.flex布局的基本概念
1.什么是flex布局
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，行内元素也可以通过 inline-flex 使属性值用 Flex 布局。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"；
2.flex能解决什么问题
- 解决元素居中等布局问题
- 使盒子自动弹性收缩，可适配不同大小屏幕和移动端
3.flex布局怎么使用
任何一个容器都可以为flex布局：
.box{
display: flex;
}行内元素使用flex布局：
.box{
display: inline-flex;
}Webkit 内核的浏览器，必须加上-webkit前缀：
.box{
display: -webkit-flex; /* Safari */
display: flex;
}盒子设为flex弹性盒子后，子元素的float、clear和vertical-align属性将会失效
二、flex布局的属性
父元素的属性设置：
1.justify-content
2.align-items
3.align-content
4.flex-direction
5.flex-wrap
1.justify-content属性
设置子元素在主轴方向的对齐方式：
flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)
flex-end 靠着main-end对齐//参考常见术语(一般是右方向)
center 靠着主轴居中对齐//一般就是居中对齐
space-between 两端对齐，靠着容器壁，剩余空间平分
space-around 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
space-evenly 平均对齐，不靠着容器壁，剩余空间平分
.box{
/* 弹性布局 */
display: flex;
/* 靠左对齐 */
/* justify-content: flex-start; */
/* 靠右对齐 */
/* justify-content: flex-end; */
/* 弹性容器里内容居中 */
/* justify-content: center; */
/* 空白区域在弹性盒子之间 */
/* justify-content: space-between; */
/* 空白区域均匀分布在弹性盒子两侧，相对于弹性盒子左右margin */
/* justify-content: space-around; */
/* 弹性盒子与容器之间间距相等 */
justify-content: space-evenly;
}
2.align-items属性
设置子元素在侧轴方向的对齐方式
flex-start：侧轴的起点对齐。
flex-end：侧轴的终点对齐。
center：侧轴的中点对齐。
stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。
.box {
display: flex;
align-items: flex-start;
align-items: flex-end;
align-items: center ;
align-items: stretch;
}flex-start值
flex-end值
center值
3.align-content属性
设置交叉轴行对齐方式（多行）
.box {
display: flex;
align-content: space-between;
align-content: space-around;
align-content: center;
}align-content属性定义了多个元素在多个主轴的对齐方式。 可以通俗的理解为沿侧轴的对齐方式。
常用属性值有 center 居中对齐等（即在沿侧轴的方向上与justify-content属性有着相同的属性值）
4.flex-direction属性
flex-direction属性决定主轴的方向，默认值水平向右（row），我们常用的就是改为垂直向下（column ）
.box {
display: flex;
flex-direction: column;
}
效果如下：
5.flex-wrap属性
默认子元素都排在一条线（又称”轴线”）上。如果一条轴线排不下，用flex-wrap实现换行方式。
常用属性值有三个：nowrap不换行（默认值）、wrap换行、wrap-reverse反向换行
nowrap (默认值) 不换行压缩宽度
wrap 换行
wrap-reverses 反向换行
nowrap值
wrap值
wrap-reverses值
三、flex布局伸缩比
flex的伸缩比只占用父元素剩余的尺寸
父元素设置flex弹性盒子
.father {
display: flex;
}子元素设置：
.son {
// flex:整数；
flex: 1;
}例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 600px;
height: 150px;
border: 2px solid #000;
margin: 100px auto;
/* 弹性容器 */
display: flex;
}
.son1 {
flex: 1;
background-color: aqua;
}
.son2 {
flex: 2;
background-color: bisque;
}
.son3 {
flex: 1;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="father">
<div class="son1 son">1</div>
<div class="son2 son">2</div>
<div class="son3 son">3</div>
</div>
</body>
</html>
所有子元素flex数值之和为父元素剩余尺寸的大小
移动端常用搜索框布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 100vw;
height: 50px;
border: 2px solid #000;
margin: 100px auto;
/* 弹性容器 */
display: flex;
}
.search {
flex: 1;
/* background-color: bisque; */
}
.son {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="father">
<input type="search" class="search">
<div class="son">搜索</div>
</div>
</body>
</html>
搜索按钮固定宽度，搜索框可以按照屏幕宽度自适应，效果图如下：
作者：丨怀瑾握瑜
链接：https://www.jianshu.com/p/bd89212ffd97
相关推荐
- Python操作Word文档神器:python-docx库从入门到精通
-
Python操作Word文档神器：python-docx库从入门到精通动动小手，点击关注...
- Python 函数调用从入门到精通:超详细定义解析与实战指南 附案例
-
一、函数基础：定义与调用的核心逻辑定义：函数是将重复或相关的代码块封装成可复用的单元，通过函数名和参数实现特定功能。它是Python模块化编程的基础，能提高代码复用性和可读性。定义语法：...
- 等这么长时间Python背记手册终于来了，入门到精通(视频400集)
-
本文毫无套路！真诚分享！前言：无论是学习任何一门语言，基础知识一定要扎实，基础功非常的重要，找一个有丰富编程经验的老师或者师兄带着你会少走很多弯路，你的进步速度也会快很多，无论我们学习的目的是什么，...
- 图解Python编程:从入门到精通系列教程(附全套速查表)
-
引言本系列教程展开讲解Python编程语言，Python是一门开源免费、通用型的脚本编程语言，它上手简单，功能强大，它也是互联网最热门的编程语言之一。Python生态丰富，库（模块）极其丰富，这使...
- Python入门教程(非常详细)从零基础入门到精通，看完这一篇就够
-
本书是Python经典实例解析，采用基于实例的方法编写，每个实例都会解决具体的问题和难题。主要内容有：数字、字符串和元组，语句与语法，函数定义，列表、集、字典，用户输入和输出等内置数据结构，类和对象，...
- Python函数全解析:从入门到精通，一文搞定!
-
1.为什么要用函数？函数的作用：封装代码，提高复用性，减少重复，提高可读性。...
- Python中的单例模式:从入门到精通
-
Python中的单例模式：从入门到精通引言单例模式是一种常用的软件设计模式，它保证了一个类只有一个实例，并提供一个全局访问点。这种模式通常用于那些需要频繁创建和销毁的对象，比如日志对象、线程池、缓存等...
- 【Python王者归来】手把手教你，Python从入门到精通!
-
用800个程序实例、5万行代码手把手教你，Python从入门到精通！...
- Python从零基础入门到精通:一个月就够了
-
如果想从零基础到入门，能够全职学习（自学），那么一个月足够了。...
- Python 从入门到精通:一个月就够了
-
要知道，一个月是一段很长的时间。如果每天坚持用6-7小时来做一件事，你会有意想不到的收获。作为初学者，第一个月的月目标应该是这样的：熟悉基本概念（变量，条件，列表，循环，函数）练习超过30个编...
- Python零基础到精通，这8个入门技巧让你少走弯路，7天速通编程!
-
Python学习就像玩积木，从最基础的块开始，一步步搭建出复杂的作品。我记得刚开始学Python时也是一头雾水，走了不少弯路。现在回头看，其实掌握几个核心概念，就能快速入门这门编程语言。来聊聊怎么用最...
- 神仙级python入门教程(非常详细)，从0到精通，从看这篇开始!
-
python入门虽然简单，很多新手依然卡在基础安装阶段，大部分教程对一些基础内容都是一带而过，好多新手朋友，对一些基础知识常常一知半解，需要在网上查询很久。...
- Python类从入门到精通，一篇就够!
-
一、Python类是什么？大家在生活中应该都见过汽车吧，每一辆真实存在、能在路上跑的汽车，都可以看作是一个“对象”。那这些汽车是怎么生产出来的呢？其实，在生产之前，汽车公司都会先设计一个详细的蓝图...
- 学习Python从入门到精通:30天足够了，这才是python基础的天花板
-
当年2w买的全套python教程用不着了，现在送给有缘人，不要钱，一个月教你从入门到精通1、本套视频共487集,本套视频共分4季...
- 30天Python 入门到精通（3天学会python）
-
以下是一个为期30天的Python入门到精通学习课程，专为零基础新手设计。课程从基础语法开始，逐步深入到面向对象编程、数据处理，最后实现运行简单的大语言模型（如基于HuggingFace...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)