伸缩布局

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。

  1. 重要属性

a)     display:flex:如果一个容器设置了这个属性,那么这个盒子里面的所有直接子元素都会自动的变成伸缩项(flex item)

b)     justify-content: 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,语法:justify-content:flex-start | flex-end | center | space-between | space-around

  • flex-start:弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。
  • flex-end:弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。
  • center:弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。
  • space-between:弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于'flex-start'。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。
  • space-around:弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于'center'。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

c)     flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。它用来设置或检索弹性盒模型对象的子元素排列方式,它的两种取值:flex-direction:定义弹性盒子元素的排列方向。flex-wrap:控制flex容器是单行或者多行。

  • flex-direction:  flex-direction:row | row-reverse | column | column-reverse
  • row:主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。
  • row-reverse:对齐方式与row相反。
  • column:主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)。
  • column-reverse:对齐方式与column相反。
  • flex-wrap:  flex-wrap:nowrap | wrap | wrap-reverse
  • nowrap:flex容器为单行。该情况下flex子项可能会溢出容器
  • wrap:flex容器为多行。该情况下flex子项溢出的部分会被放置到新行,子项内部会发生断行
  • wrap-reverse:反转 wrap 排列。

d)   flex属性:flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选

  • flex: [flex-grow] [flex-shrink] [flex-basis]:大多数情况下没必要使用这种语法,当使用flex缩写时,大多数情况下没必要使用这种语法
  • flex: [number]:这个语法指定了一个数字,代表了这个伸缩项目该占用的剩余空间比例
  • flex: auto:属性值被设为auto的伸缩项目,会根据主轴自动伸缩以占用所有剩余空间

flex 伸缩布局的更多相关文章

  1. 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_flex布局

    移动web开发--flex布局 1.0 传统布局和flex布局对比 1.1 传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广 ...

  2. 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局

    移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...

  3. CSS3(5)---伸缩布局(Flex)

    CSS3(5)---伸缩布局 有关页面布局之前写过三篇相关文章: 1.CSS(5)---盒子模型 2.CSS(6)---浮动(float) 3.CSS(8)---定位(position) 一.什么是F ...

  4. CSS伸缩布局

    1. 伸缩布局应用: 伸缩布局应用 主轴: Flex容器的主轴用来配置Flex项目,默认是水平方向 侧轴: 与主轴垂直的轴称为侧轴,默认还是垂直方向 方向: 默认是主轴从左向右, 侧轴默认是从上到下 ...

  5. CSS3伸缩布局Flex学习笔记

    如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些 ...

  6. CSS3弹性伸缩布局(二)——flex布局

    上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9 ...

  7. 弹性伸缩布局-flex

    弹性伸缩布局-flex 引言:本文主要参照阮一峰的网络日志 .郭锦荣的博客总结完成. 正文: 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性 ...

  8. css学习_css3伸缩布局 flex布局

    1.flex布局 案例一: 案例二:   保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例  -----用fle ...

  9. CSS 小结笔记之伸缩布局 (flex)

    CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...

随机推荐

  1. Angular2 直接给元素指定超链接打开会带有 `unsafe` 字样导致数据不能加载

    解决方法: 在 component 中引入 import { DomSanitizer } from "@angular/platform-browser";然后在构造函数中注入  ...

  2. selenium常用API实例

    1.访问网页地址 driver.get( url ); driver.navigate( ).to( url ); 2.访问网页前进.后退 driver.navigate( ).forward( ); ...

  3. Android----- 版本更新和 服务器下载新版本APK并安装

    前段时间有朋友问我版本更新的问题,所以来写一篇版本更新和APK下载并安装的博客. 版本更新,几乎在所有的项目中都用的到,一般是这样的流程,当进入APP首页是便会检测版本是否为最新版本,不是则提示你下载 ...

  4. Gruntjs提高生产力(二)

    摆脱混乱的html文件中开发,拥有development与product模式是我们梦寐以求的. 我买的需求是: 1.产出一定格式的目录结构,以供日常开发使用,脚手架功能. 2.在开发模式环境中我们按照 ...

  5. Metasploit没有db_autopwn命令的解决办法

    将附件db_autopwn.rp 拷贝到/opt/framework3/msf3/plugins/PS:db_autopwn.rp 下载地址:http://dl.vmall.com/c04w8czlc ...

  6. Centos7 使用Dockerfile 制作自己的Dotnetcore程序镜像

    准备Centos7环境及Docker环境 从Docker hub拉取 Microsoft/dotnet 基础镜像(可以使用国内加速) 向Centos7指定目录上传Dotnet Core程序,目录: / ...

  7. IOS-涂鸦

    // // PaintView.m // IOS_0224_涂鸦 // // Created by ma c on 16/2/24. // Copyright © 2016年 博文科技. All ri ...

  8. 更改gitlab默认端口

    若linux服务器的80和8080端口都已经被使用,则需修改gitlab监听的端口 修改路径文件:vim /etc/gitlab/gitlab.rb 1.修改external_url 'http:// ...

  9. MVC DateTime 字段 EditTime 必须是日期模板只能用于字段访问、属性访问、一维数组索引或单参数自定义索引器表达式

    ASP.NET MVC 中model含有DateTime类型的字段 更新字段时提示:字段 EditTime必须是日期,. 但是明明填入的是日期还是给出这个提示, 看有的博客说那是因为日期形式错了,如果 ...

  10. ASP.NET经典权限解决方案,适用于OA、CRM、ERP、HR等应用系统

    经典权限解决方案 1.权限简介 一般的管理系统都需要对用户的操作进行一定的限制,有的用户可以有许多操作,有的则有少量的操作.这样就需要一个授权机制,基于角色的授权机制描述了某个角色拥有一定数量的操作授 ...