首页 > 其他分享 >display:flex弹性布局

display:flex弹性布局

时间:2023-07-11 19:13:36浏览次数:31  
标签:flex 盒子 默认 弹性 对齐 display

 

设置方式:给父元素设置display: flex,子元素可以自动挤压或拉伸

flex弹性容器里的弹性盒子可以设置宽高,比如a标签设置宽高生效,不用转块

描述

属性

创建flex容器(父级)

display: flex

主轴对齐方式

 

justify- content

flex-start起点开始排列(默认)

flex-end终点开始排列

center(工作中常用)

space-between之间(工作中常用)

space-around两侧(工作中常用)

space-evenly 平均(工作中常用)

行对齐方式

 

align- content

 

同上

注意:单行不生效

侧轴对齐方式

(给弹性容器设置

对象:当前弹性容器内所有弹性盒子)

 

align-items

stretch沿侧轴尺寸拉伸铺满(侧轴没有尺寸默认拉伸)(常用)

center沿侧轴居中(常用)

flex-start起点开始排列(了解)

flex-end终点开始排列(了解)

某个弹性盒子

侧轴对齐方式

(给弹性盒子设置)

align-self

 

同上

修改主轴方向

 

flex-direction

 

row 水平方向,从左向右(默认)

column垂直方向,从上向下(只记这一个,其他工作中基本不用)

row-reverse水平方向,从右向左

column-reverse垂直方向,从下向上

弹性伸缩比

(控制弹性盒子的主轴方向的尺寸

 

flex

 

整数数字,表示占用父级剩余尺寸的份数。

.

弹性盒子换行

 

 

flex-wrap

 

wrap: 换行,不再挤压变小

nowrap:不换行(默认)

(弹性盒子可以自动挤压或拉伸,默认情况下,所有弹性盒子都在一行显示。)

 

标签:flex,盒子,默认,弹性,对齐,display
From: https://www.cnblogs.com/nizi-ver1/p/17545696.html

相关文章

  • DjangoORM_choices字段get_字段_display()显示值
    示例:模型定义classmsg(models.Model):choice=((1,'技术部'),(2,'行政'),(3,'人事'),(4,"财务"),)group=models.IntegerField(choices=choice)想要获取元组的值,则使用下面的方法get_grou......
  • Ubuntu20.04 开机卡在“starting Gnome Display Manager”
    今天ubuntu开机遇到了该问题:解决方法:https://blog.csdn.net/qq_42680785/article/details/116195840sudoaptautoremove--purgesnapd//清理磁盘空间......
  • Flex布局
    引言:关于前端布局,我学习了Pink老师的Flex。以下是我自己做的一些简单笔记。一个小套路凡使用Flex布局,我们都会在其父元素设置display:flex;那么就有人问了,这句代码的意义何在?别急,看下面GPT怎么回答!display:flex是一种CSS属性,用于定义一个容器元素以及其子元素的布局方式。它引......
  • Flex布局常用属性详解
    1.Flex布局与响应式布局1.1为什么需要响应式布局?在电脑PC端,使用浮动,定位同时使用像素px单位就可以完成大部分布局,而且布局完之后不会有大问题,但是到了移动端,移动设备的屏幕尺寸多种多样,从小屏幕的智能手机到大屏幕的平板电脑,甚至是可穿戴设备,简单地运用和PC端一样的方式就会出......
  • flex垂直居中当界面空间不足时显示不全
    代码示例如下<divid="a"style="display:flex;justify-content:center;align-items:center;width:200px;height:100%;background:skyblue"><divid="b"style="height:400px;background:pink;width:100px">&l......
  • PHP应用出现500 : The page cannot be displayed because an internal server error h
    问题描述PHP应用突然遇见了500 Thepagecannotbedisplayedbecauseaninternalservererrorhasoccurred.错误,但是如果访问一个静态HTML页面,就可以成功。只要是PHP页面,就是500。 问题解答登录AppService的Kudu站点,查看日志发现一句:  scriptProcessorcouldnotbefoun......
  • 【Azure App Service for Windows】 PHP应用出现500 : The page cannot be displayed
    问题描述PHP应用突然遇见了500 Thepagecannotbedisplayedbecauseaninternalservererrorhasoccurred.错误,但是如果访问一个静态HTML页面,就可以成功。只要是PHP页面,就是500。 问题解答登录AppService的Kudu站点,查看日志发现一句:  scriptProcessorcouldnotb......
  • CSS|Flex布局
    演示动图来源:GitHub一.什么是flex布局是一种专门的CSS一维(水平/垂直)布局方案位置(定性)大小(定量)怎么研究位置和大小借助坐标系(平面直角坐标系)水平轴:主轴垂直轴:交叉轴二.区分flex容器和flex项目1)什么是flex容器启用flex布局方案的元素2)如何......
  • Flex布局常用属性详解
    1.Flex布局与响应式布局1.1为什么需要响应式布局?在电脑PC端,使用浮动,定位同时使用像素px单位就可以完成大部分布局,而且布局完之后不会有大问题,但是到了移动端,移动设备的屏幕尺寸多种多样,从小屏幕的智能手机到大屏幕的平板电脑,甚至是可穿戴设备,简单地运用和PC端一样的方式就会出......
  • flex布局四个div盒子前三个盒子左对齐,后面的盒子右对齐
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>flex布局</title><style>*{margin:0;padding:0;}.box{ disp......