一、伸缩布局的起源

  1、之前我们想要适应不同的浏览器,一般采用的是设置宽度、高度为父级元素的百分比,但是有时候百分比的计算是相当复杂的,加上有时候还有规定的宽度要设置,所以,伸缩布局的出现是我们所急需的。

  例:将一个section三等分,其中放入3个div

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>伸缩布局</title>
  9. <style>
  10. /* 原始的模式 */
  11. /* section{
  12. width: 1000px;
  13. height: 200px;
  14. }
  15. div{
  16. float:left;
  17. width:33.33%;
  18. height:20px;
  19. background-color: red;;
  20. }
  21. div:nth-child(2){
  22. background-color: blue;
  23. }
  24. div:last-child{
  25. background-color:green;
  26. } */
  27. /* 采用伸缩布局 */
  28. section {
  29. display: flex;
  30. width: 1000px;
  31. }
  32.  
  33. div {
  34. flex: 1;
  35. height: 20px;
  36. background-color: red;
  37. }
  38.  
  39. div:nth-child(2) {
  40. background-color: blue;
  41. }
  42.  
  43. div:last-child {
  44. background-color: green;
  45. }
  46. </style>
  47. </head>
  48.  
  49. <body>
  50. <section>
  51. <div></div>
  52. <div></div>
  53. <div></div>
  54. </section>
  55. </body>
  56.  
  57. </html>

二、伸缩布局的使用

  1、可以添加具体宽度

  1. div:nth-child(2) {
  2. width: 20px;
  3. background-color: blue;
  4. }

  2、可以设置最小宽度,这样当屏幕缩小到小于最小宽度时,就会出现滚动条

  min-width:500px;

  3、伸缩布局的排列方式:主轴、方向

  1. flex-direction: row;
  2. /* 默认的:横向排列 */
  3. flex-direction: column;
  4. /* 纵向排列 */
  5. flex-direction: row-reverse;
  6. /* 横向逆序 */
  7. flex-direction: column-reverse;
  8. /* 纵向逆序 */

  4、主轴的对齐方式

  

  1. /* justify-content一行的情况 */
  2. /* 从左到右,默认的顺序 */
  3. /* justify-content: flex-start; */
  4. /* 从右到左的,逆序 */
  5. /* justify-content: flex-end; */
  6. /* 子元素在父元素的中间显示 */
  7. /* justify-content: center; */
  8. /* 均分,贴边 */
  9. /* justify-content: space-around; */
  10. /* 均分,不贴边 */
  11. /* justify-content: space-between; */
/* 纵向逆序 */
/* align-content 多行的情况()
值同,默认是strentch
必须在父元素例配置{display:flex;flex-direction:row;flex-wrap:wrap;}
*/
  1.  

  5、order:控制子元素的裴烈顺序:默认是0,越小的值越排在前面,可以是负数

  6、flex-wrap是否换行:no;默认收缩显示wrap;换行wrap-reverse;以相反的顺序换行

  7、aligin-items侧主轴的对齐方式:stretch;子元素高度拉伸(默认)center;居中felx-start;在开头;flex-end;在底边

  8、flex-flow:排列方向 是否换行的综合接卸形式

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

  1. 弹性伸缩布局-flex

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

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

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

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

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

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

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

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

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

  6. 伸缩布局 Flex

    其中在webkit内核的浏览器中使用时,必须加上-webkit-前缀,采用Flex布局的元素,称为Flex容器(flex container),简称”容器”.它的所有子元素自动成为容器成员,称为Fle ...

  7. 弹性伸缩布局flex

    Flex 布局教程:语法篇   作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + posi ...

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

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

  9. CSS3 Flex布局(伸缩布局盒模型)学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

随机推荐

  1. C#字符串、字节数组和内存流间的相互转换 - IT浪潮之巅

    定义string变量为str,内存流变量为ms,比特数组为bt 1.字符串=>比特数组 (1)byte[] bt=System.Text.Encoding.Default.GetBytes(&q ...

  2. Spring基础面试题(一)

    Spring是什么? Spring是一个轻量级的IoC和AOP容器框架.是为Java应用程序提供基础性服务的一套框架,目的是用于简化企业应用程序的开发,它使得开发者只需要关心业务需求.常见的配置方式有 ...

  3. day 86 Vue学习之八geetest滑动验证

    Vue学习之八geetest滑动验证   本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...

  4. Git 查看、删除、重命名远程分支

    原文地址:http://blog.csdn.net/sunnyyoona/article/details/52065544 1. 查看远程分支 分支加上-a参数可以查看远程分支,远程分支会用红色表示出 ...

  5. 本地项目通过 git 同步到 github

    1. github创建仓库并克隆仓库地址 2. 在本地通过git命令:git clone <仓库地址> 生成github仓库文件夹 3. 将本地项目复制到该文件夹 4. 通过git命令:g ...

  6. JavaScript对象小基础

    对象的简单学习: 1.String对象1:属性     在javascript中可以用单引号,或者双引号括起来的一个字符当作     一个字符对象的实例,所以可以在某个字符串后再加上.去调用Strin ...

  7. 关于切片/截取(slice)和random模块的使用(实例:猜单词小游戏)

    切片和random的使用在源码中都有注释(可以直接下载):https://github.com/NoobZeng/GuessWords 1. README.MD 基于Python的猜单词游戏 猜单词小 ...

  8. [Baltic2009]beetle【区间Dp】

    Online Judge:Bzoj1761 Label:区间Dp 题目描述 在一条直线上有N个点,每个点M升水. 一个虫子在坐标轴0点上,它每个单位时间移动一格,每个点的水每单位时间消失1升. 问虫子 ...

  9. Android开发 layer-list详解

    参考:https://blog.csdn.net/speverriver/article/details/80925686 挖坑,以后填坑

  10. 关于Synthesis

    1,当追求面积最小时 会以牺牲Fmax为代价,可以使用一下setting: fit_pack_for_density=on fit_report_lab_usage_stats=on 可在 .qsf ...