伸缩布局

古城微笑少年丶 2021-07-25 16:13 410阅读 0赞

# 伸缩布局 #

> 注意，例如img这种多媒体标签，不要用伸缩盒子来布局，设置宽100%即可；

## display: flex; (父元素) ##

### 必须将父元素设置为伸缩盒子（弹性盒子） ###

### 在伸缩盒子中，默认子元素在一行显示，这是伸缩盒子的特点，与脱标无关！ ###

> 为什么会一行显示？
> 
>     在伸缩盒子中，有两条轴，一条主轴，一条侧轴。
> 
>     主轴：默认方向 - 水平从左向右
> 
>     侧轴：始终垂直于主轴
> 
>     在伸缩盒子中，子元素都是按照主轴方向显示的。

## flex-direction: row; (父元素) ##

> 设置主轴方向
> 
> 此时已然可以设置 padding 和 margin ；

### row 行(横向)； ###

### column 列(纵向)； ###

### row-revers (横向反转，从右向左，类似右浮动)； ###

### column-reverse(竖直反转)； ###

## justify-content: flex-start; (父元素) ##

> 设置元素在主轴的对齐方式

### flex-star; ###

> 从主轴的开始位置向右对齐显示

### flex-end; ###

> 在轴的末端对齐

### center; ###

> 主轴的居中位置处

### space-between; ###

> 两端对齐，中间自适应

### space-around; ###

> 环绕效果，子盒子左右两侧都有空白；

### space-evenly; (ios专有) ###

> 把所有空白平均分配；
> 
> 没有代码提示。

## align-items: stretch; (父元素) ##

> 设置元素在侧轴的对齐方式；
> 
> 只有当子元素全部在一行显示的时候才能用此属性；
> 
> 子元素有换行的时候用align-content: stretch; (父元素)属性设置元素在侧轴的对齐方式。
> 
> 其实，当元素多行显示的时候，依旧可以用此属性：
> 
>     元素每一行都有自己的侧轴，当开启align-items的时候，元素在自己行的侧轴生效。

### stretch; (默认) ###

> stretch 拉伸的意思当子元素没有设置高度的时候，默认 stretch 拉伸为父容器的高度；
> 
> 当子元素有高度的时候，就默认flex-start;

### flex-start; ###

### flex-end; ###

### center; ###

## flex-wrap: nowrap; (父元素) ##

> 在伸缩盒子中，元素如果超出父元素，默认不换行。可以给父元素设置此属性。
> 
> 元素换行：当子元素有高度的时候，如果换 2 行，默认是侧轴的一半，3 行，则是侧轴的三分之一，以此类推，元素在此行的start位置。

### nowrap;(默认) ###

### wrap - 换行 ###

## align-content: stretch; (父元素) ##

> 设置元素换行后的对齐方式前提要保证元素是换行的
> 
> 元素换行：当子元素有高度的时候，如果换 2 行，默认是侧轴的一半，3 行，则是侧轴的三分之一，以此类推，元素在此行的start位置。

### flex-start; ###

### flex-end; ###

### center; ###

### space-around; ###

### space-between; ###

### stretch; (默认) ###

### space-evenly; (ios专有) ###

## flex: 1; (子元素) ##

> 设置子元素所占父元素 剩余 空间的比例
> 
> 注意是 剩余 ！！！

## order ##

> 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

# #

转载于:https://www.cnblogs.com/yummylucky/p/10128336.html

发表评论取消回复

表情：

评论列表（有 0 条评论，410人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3Flex伸缩布局，携程网案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...

妖狐艹你老母/ 2024年04月18日 21:40/ 0 赞/ 99 阅读

相关 CSS3-flex伸缩布局

文章目录概述修改主轴方向主轴对齐方式侧轴对齐方式

╰+哭是因爲堅強的太久メ/ 2023年07月13日 00:53/ 0 赞/ 32 阅读

相关 CSS学习笔记（flex 伸缩布局）

一、伸缩布局 Flex `display: flex | inline-flex;` Flexbox 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 fl

小咪咪/ 2023年02月27日 12:17/ 0 赞/ 269 阅读

相关 flex 伸缩布局

Flex是Flexible Box的缩写，意为”弹性布局”，任何一个容器都可以指定为flex布局；为什么要有弹性布局？？？答：在将某三个盒子排布在一行不用flex，

叁歲伎倆/ 2022年12月22日 08:52/ 0 赞/ 140 阅读

相关 3分钟快速掌握Css弹性盒子（伸缩盒子）布局

弹性盒子（flex） 1.语法：display：flex（定义当前元素为弹性盒子） ①弹性盒子是一种布局方式 ②特点：改变子元素在父元素的排列方式采用flex布局

- 日理万妓/ 2022年12月13日 00:45/ 0 赞/ 411 阅读

相关伸缩菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

柔情只为你懂/ 2022年07月14日 11:20/ 0 赞/ 197 阅读

相关 heat自动伸缩

Heat自动伸缩操作说明文档 1 Heat 简介 The Orchestration service provides a template-based o

梦里梦外;/ 2022年06月06日 05:36/ 0 赞/ 261 阅读

相关 CSS3中伸缩布局

布局的传统解决方案，基于[盒状模型][Link 1]，依赖 [display][]属性 + [position][]属性 + [float][]属性。它对于那些特殊布局非常不方

爱被打了一巴掌/ 2022年05月09日 02:12/ 0 赞/ 183 阅读

相关伸缩

mainwindow.cpp include "mainwindow.h" include "ui_mainwindow.h" include <QP

素颜马尾好姑娘i/ 2022年04月18日 04:07/ 0 赞/ 229 阅读

相关伸缩布局

伸缩布局 > 注意，例如img这种多媒体标签，不要用伸缩盒子来布局，设置宽100%即可； display: flex; (父元素) 必须将父元素设置为伸缩盒子（

古城微笑少年丶/ 2021年07月25日 16:13/ 0 赞/ 411 阅读