1.需要记住的属性和值。

 -------------------------------------------------------------
 方向横和纵

 flex-direction: row | row-reverse | column | column-reverse;
 -------------------------------------------------------------
 超过怎么办。
 flex-wrap: nowrap | wrap | wrap-reverse;
 -------------------------------------------------------------
 以上两个的简写。
 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
 -------------------------------------------------------------
 justify-content属性定义了项目在主轴上的对齐方式。左对齐，右对齐，中间，两端对齐，空间-环绕。
 justify-content: flex-start | flex-end | center | space-between | space-around;
 -------------------------------------------------------------
 align-items属性定义项目在交叉轴上如何对齐。
 align-items: flex-start | flex-end | center | baseline | stretch;
 -------------------------------------------------------------
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
 ------------------------------------------------------------

2.  CSS3 display：flex和display：box有什么区别

box 是旧属性，已经被flex代替。
flex和box都是伸缩盒，具体细节有区别。
一些浏览器可能只支持box.
由于css3还是讨论稿，所以一些属性可能随时被修改。

3.两边都是150px，中间的线的宽度自适应。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<div id="app">

		<div class="a50"></div>

		<div id="children">

		</div>

		<div class="a50"></div>

	</div>

	<style>

		#app{

			display: flex;

			display: -webkit-flex;

  			display: -ms-flexbox;

		}

		#children{

			flex:1;

			border: 1px solid black;

		}

		.a50{

			flex: 0 0 150px;

			border: 1px solid red;

		}

	</style>

</body>

</html>

　　

4.

5.

6.

 

flex属性的学习的更多相关文章

  1. CSS布局学习（二） - flex属性

    flex属性 定义 flex布局包括最外层的容器和内部的元素,flex属性是内部元素属性.flex属性是flex-grow, flex-shrink, flex-basis三个属性的简写 flex-g ...

  2. css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记

    最近在研究css3的flex.遇到的flex:1;这一块,很是很纠结,flex-grow.flex-shrink.flex-basis始终搞不清,最经搜集了大量的介绍,应该能算是明白了.网上大部分解释 ...

  3. [20190618]日常学习记录(二)-flex属性及vue实战

    早上在看flex属性,总结一下它的优缺点 为什么使用flex, 她和浮动相比,代码更少.浮动要考虑左浮动右浮动,有时还要去清除浮动.flex一行代码就搞定了. 她更灵活,实现平均分配,根据内容大小分配 ...

  4. flex弹性布局学习笔记

    前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...

  5. 小程序flex属性两边边距自适应

    使用flex属性两边边距自适应解决方案   Justify-content:center   文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有 ...

  6. 详解 Flexible Box 中的 flex 属性

    导读: 弹性盒子是 CSS3 的一种布局模式,一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有适当的行为的布局方式.其中 flex 属性用于指定弹性子元素如何分配空间. flex 属性的值 ...

  7. flex弹性布局学习

    一.介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性.主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支持: ...

  8. flex属性

    一.flex属性的归纳 flex-direction flex-wrap flex-flow justify-content align-items align-content 1.1 flex-di ...

  9. CSS3-flex弹性布局之flex属性

    flex属性 前置

随机推荐

  1. Linux - TCP编程相关配置1

    100万并发连接服务器笔记之1M并发连接目标达成 第四个遇到的问题:tcp_mem 在服务端,连接达到一定数量,诸如50W时,有些隐藏很深的问题,就不断的抛出来. 通过查看dmesg命令查看,发现大量 ...

  2. Linux 使用 github 常用命令

    Linux 使用 github  常用命令 今天整理一下常用的 github 命令,自己只是一个编程小白,有些地方可能做的不是很好,仅仅用作自己的学习使用. 创建一个文件夹用于存放github仓库 m ...

  3. vertica导出导入数据

    直接开. 导出dat vsql -U dbadmin -wlizhenghua -At -F'|' -c "select * from APP_INTER_BOSS_CDR_COUNT_T& ...

  4. JAVA基础部分 JDK和JRE以及JVM

    第一部分: 一.dos命令 *快捷查看电脑ip: Win + R进入cmd;输入ipconfig/all查看IPv4:192.168.0.xxx(首选); 基本命令: cd进入目录:d: 直接进入盘符 ...

  5. 正则表达式验证HTTP地址是否合法

    转载:https://blog.csdn.net/fsdad/article/details/52637426 判断url是否合法 const std::regex urlpattern(" ...

  6. Junit的套件使用

    定义一个类,在类的上方添加@RunWith(Suite.class)和@SuiteClasses({XX.class,YY.class,...}) 实例有两个类分别为:public class Log ...

  7. Bootstrap3基础 btn-primary/warning... 三类按钮的六种样式

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  8. outlook使用笔记

    使用电子邮件客户端(pc端)软件, 确实是不得已. 出于某些考试/了解的目的? 现在使用 在线/网页端电子邮件 确实要好得多, 方便得多了. outlook和其他软件都是 设置的 "帐户 a ...

  9. windows下如何安装vundle?

    参考: http://blog.csdn.net/zhuxiaoyang2000/article/details/8636472 vundle是gmarik 受 ruby的 bunler的启发开发的. ...

  10. IDEA新建一个Project和Module的问题