1,弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器

常用flex来编写盒子横向分布;

一: flex-direction

flex-direction 属性指定了弹性子元素在父容器中的位置。

flex-direction: row | row-reverse | column | column-reverse
  • row:横向从左到右排列(左对齐),默认的排列方式。
  • row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
  • column:纵向排列。
  • column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

二:justify-content 属性

内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。

justify-content: flex-start | flex-end | center | space-between | space-around
    • flex-start:

      弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。

    • flex-end:

      弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。

    • center:

      弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。

    • space-between:

      弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。

    • space-around:

      弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。

效果图:

三: align-items 属性

align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch
  • flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
  • center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
  • baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
  • stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

四:flex-wrap 属性

flex-wrap 属性用于指定弹性盒子的子元素换行方式、

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
  • nowrap - 默认, 弹性容器为单行。该情况下弹性子项可能会溢出容器。
  • wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行
  • wrap-reverse -反转 wrap 排列

五:align-content 属性

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。

align-content: flex-start | flex-end | center | space-between | space-around | stretch
  • stretch - 默认。各行将会伸展以占用剩余的空间。
  • flex-start - 各行向弹性盒容器的起始位置堆叠。
  • flex-end - 各行向弹性盒容器的结束位置堆叠。
  • center -各行向弹性盒容器的中间位置堆叠。
  • space-between -各行在弹性盒容器中平均分布。
  • space-around - 各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。

六:弹性子元素属性

order:用整数值来定义排列顺序,数值小的排在前面。可以为负值。

七:完美的居中

    在父级元素定义display: flex;

    在子级元素添加margin: auto属性

八:align-self

align-self 属性用于设置弹性元素自身在侧轴(纵轴)方向上的对齐方式。

align-self: auto | flex-start | flex-end | center | baseline | stretch
  • auto:如果'align-self'的值为'auto',则其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch'。
  • flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
  • flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
  • center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
  • baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
  • stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。
 

九:flex

flex 属性用于指定弹性子元素如何分配空间。

 
flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
  • auto: 计算值为 1 1 auto
  • initial: 计算值为 0 1 auto
  • none:计算值为 0 0 auto
  • inherit:从父元素继承
  • [ flex-grow ]:定义弹性盒子元素的扩展比率。
  • [ flex-shrink ]:定义弹性盒子元素的收缩比率。
  • [ flex-basis ]:定义弹性盒子元素的默认基准值。

可以理解为 子元素在父级元素中占的份数!!!


 
 

一些css属性的理解和运用。的更多相关文章

  1. 【转载】CSS flex属性深入理解

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2019/12/css-f ...

  2. 那些年我们错过的超级好用的CSS属性

    在看前辈写的CSS样式的时候发现好多之前都没用过的Css属性,现在看来有必要整理一下啦. 一.CSS选择器(http://www.w3school.com.cn/cssref/css_selector ...

  3. CSS 属性 - position讲解

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...

  4. 十个实用但IE不支持的CSS属性

    对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6.当然,这样的想法是非常病态的,马上打消.本文里面,介绍了10个 ...

  5. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  6. css基础--深入理解opacity和rgba的区别

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...

  7. css基础--深入理解弹性盒flex布局

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...

  8. css属性分类介绍

    css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...

  9. web前端(9)—— CSS属性

    属性 终于到css属性,前面就零零散散的用了什么color,font-size之类,本篇博文就专项的介绍它了 字体属性 font-family 此属性是设置字体样式的,比如微软雅黑,方正书体,华文宋体 ...

随机推荐

  1. Java - 集成开发环境Eclipse的使用方法和技巧

    00 - Eclipse教程 Eclipse 教程 01 - Eclipse设置编译和运行的环境 建议编译和运行的版本保持一致,否则请特别注意: 低编译,高运行 ---> 可行. 高编译,低运行 ...

  2. UI的设计,适配器,以及RecyclerView无法加载的解决办法

    这本书里讲到的界面设计都是用最基本的方式实现的,即编写xml文件 所有的控件都具有宽度和高度属性,即android:layout_width和android:layout_height,这两个属性对应 ...

  3. WebDriver高级应用实例(9)

    9.1封装操作表格的公用类 目的:能够使自己编写操作表格的公用类,并基于公用类进行表格中的元素的各类操作 被测网页的网址的HTML代码: <html> <body> <t ...

  4. 09-03 Java 抽象类

    抽象类的特点 /* 抽象类的概述: 动物不应该定义为具体的东西,而且动物中的吃,睡等也不应该是具体的. 我们把一个不是具体的功能称为抽象的功能,而一个类中如果有抽象的功能,该类必须是抽象类. 抽象类的 ...

  5. windows系统numpy的下载与安装教程

    numpy是一款基于python的功能强大的科学计算包.要安装numpy首先你得先安装python.python的安装非常简单,本人安装的是python3.4. 工具/原料 安装好的python程序 ...

  6. Day.js - JavaScript时间处理库

    Day.js简介 在使用JavaScript处理时间方面,使用的时Moment.js,但是它太重了,有200多k,一般项目中可能也只是用了几个api而已,所以,这里推荐一个轻量的时间库 - Day.j ...

  7. JAVA面试精选【Java算法与编程一】

    在面试中,算法题目是必须的,通过算法能够看出一个程序员的编程思维,考察对复杂问题的设计与分析能力,对问题的严谨性都能够体现出来.算法是一系列解决问题的清晰指令,也就是说,能够对一定规范的输入,在有限时 ...

  8. 三:理解Page类的运行机制(例:在render方法中生成静态文件)

    我这里只写几个常用的事件1.OnPreInit:此事件后将加载个性化信息和主题2.OnInit:初始化页面中服务器控件的默认值但控件的状态没有加载,没有创建控件树3.OnPreLoad:控件完成状态和 ...

  9. lucene 初探

    前言: window文件管理右上角, 有个搜索功能, 可以根据文件名进行搜索. 那如果从文件名上判断不出内容, 我岂不是要一个一个的打开文件, 查看文件的内容, 去判断是否是我要的文件? 几个, 十几 ...

  10. Andrew Ng机器学习课程笔记(六)之 机器学习系统的设计

    Andrew Ng机器学习课程笔记(六)之 机器学习系统的设计 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7392408.h ...