首页 > 其他分享 >CSS中常用属性(三)

CSS中常用属性(三)

时间:2022-09-03 22:46:26浏览次数:59  
标签:flex 常用 space 换行 item wrap 对齐 CSS 属性

         

/*
*作者:呆萌老师
*☑csdn认证讲师
*☑51cto高级讲师
*☑腾讯课堂认证讲师
*☑网易云课堂认证讲师
*☑华为开发者学堂认证讲师
*☑爱奇艺千人名师计划成员
*在这里给大家分享技术、知识和生活
*各种干货,记得关注哦!
*vx:it_daimeng
*/

  

flex-wrap

    默认情况下,item排列在一条线上,即主轴上,flex-wrap决定当排列不下时是否换行以及换行的方式,可能的值nowrap(默认)|wrap|wrap-reverse

    nowrap:自动缩小项目,不换行

    wrap:换行,且第一行在上方

    wrap-reverse:换行,第一行在下面

​编辑​编辑

  3、flex-flow

    是flex-direction和flex-wrap的简写形式,如:row wrap|column wrap-reverse等。默认值为row nowrap,即横向排列 不换行。

  4、justify-content

    决定item在主轴上的对齐方式,可能的值有flex-start(默认),flex-end,center,space-between,space-around。当主轴沿水平方向时,具体含义为

      flex-start:左对齐

      flex-end:右对齐

      center:居中对齐

      space- between:两端对齐

      space-around:沿轴线均匀分布

    效果如下图 

  ​编辑

5、align-items

  决定了item在交叉轴上的对齐方式,可能的值有flex-start|flex-end|center|baseline|stretch,当主轴水平时,其具体含义为

    flex-start:顶端对齐

    flex-end:底部对齐

    center:竖直方向上居中对齐

    baseline:item第一行文字的底部对齐

    stretch:当item未设置高度时,item将和容器等高对齐

  效果图如下:

  ​编辑

 

 6、align-content

   该属性定义了当有多根主轴时,即item不止一行时,多行在交叉轴轴上的对齐方式。注意当有多行时,定义了align-content后,align-items属性将失效。align-content可能值含义如下(假设主轴为水平方向):

      flex-start:左对齐

      flex-end:右对齐

      center:居中对齐

      space- between:两端对齐

      space-around:沿轴线均匀分布

      stretch:各行将根据其flex-grow值伸展以充分占据剩余空间

标签:flex,常用,space,换行,item,wrap,对齐,CSS,属性
From: https://www.cnblogs.com/daimenglaoshi/p/16653859.html

相关文章

  • 常用功能--多数据源报表
    有的时候我们一张报表的数据可能要从多个数据库的表中获取,此时我们就要新建多个数据集,并且要设置相应的过滤条件,设置连接字段。跟sql里面的join差不多。新建一张报表,......
  • 9.2 字符串的常用操作_字符串的查询操作
     '''集合的生成式'''s='hello,hello'print(s.index('lo'))#3print(s.find('lo'))#3print(s.rindex('lo'))#9print(s.rfind('lo'))#9'''如果查找不存......
  • 常用MySQL语句
    1.客户端登录在终端输入mysql-u[用户名]-p[密码] 2.数据库级别操作//创建数据库createdatabase[dbname];//查看数据库列表showdatabases;//选择数据......
  • VScode设置标签中的属性自动换行
    问题描述很多时候,在编写Vue代码时经常需要添加很多的属性,往往这时候就会采用一个属性一行的代码格式,但是格式化代码又会将其合并为一行,如果每次都手动进行换行,又会非常影......
  • CSS旋转正方体
     CSS实现一个旋转的正方体,鼠标放上去会自动解体.比较普通的实现,留个记录.(代码里的注释方式写错了)<!doctypehtml><htmllang="en"><head><metacharset="UT......
  • linux市场常用的防火墙区别
    nftables新的包过滤工具目的是代替iptablesNetfilter是引入的一个子系统,作为一个通用的、抽象的框架,提供一整套的hook函数的管理机制iptables是Linux应用......
  • Docker日常工作常用命令
    容器生命周期管理Docker创建新容器并运行[run]语法:dockerrun[OPTIONS]IMAGE[COMMAND][ARG...]OPTIONS说明:-astdin:指定标准输入输出内容类型,可选STDIN/STDOU......
  • 常用的Liunx(二)
     1、复制文件格式:cp源文件目标文件  2、复制目录(目录需要加/),格式:cp-r源目录目标目录将一个文件从一个目录复制到另外一个目录,如没有目录,需先创建两个目录,例......
  • linux常用命令详解
    一、常用linux命令的基本使用命令对应英文作用lslist查看当前文件夹下的内容pwdprintworjdirectory查看当前所在文件夹cd[目录名]changedirectory......
  • 每个开发人员都应该避免的常见 CSS 错误
    每个开发人员都应该避免的常见CSS错误1️⃣使用像素Px将您的设计锁定为所有屏幕的固定尺寸。您应始终尽可能使用相对测量值,例如em、rem、%等。2️⃣使用一个CSS文......