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. Java axis2.jar包详解及缺少jar包错误分析

    Java  axis2.jar包详解及缺少jar包错误分析 一.最小开发jar集 axis2 开发最小jar包集: activation-1.1.jar axiom-api-1.2.13.jar ax ...

  2. cannot_delete_plugins_expand_dir "/var/lib/rabbitmq/mnesia/rabbit@iZbp1iiexwyqe7tpjigcg9Z-plugins-expand"

    [root@iZbp1iiexwyqe7tpjigcg9Z rabbitmq]# cat startup_err /usr/lib/rabbitmq/bin/rabbitmq-env: line 91 ...

  3. Java利用JNI调用C/C++写成的DLL

    前言 由于学期作业的要求,笔者需要开发一个语音识别系统.出于对Java的热爱,笔者非常想用Java来写上层程序(前台+数据库的三层),又要用到Microsoft Speech SDK,所以在这些条件下 ...

  4. Merge git repo into branch of another repo

    git 两个repo merge You can't merge a repository into a branch. You can merge a branch from another rep ...

  5. linux 安装二进制包程序一般步骤

    参考:https://blog.csdn.net/linzhiji/article/details/6774410 configure/make/make install的作用 这些都是典型的使用GN ...

  6. （6CBIR模拟问题）自己动手，编写神经网络程序，解决Mnist问题，并网络化部署

    个方面: 最初的图像检索研究主要集中在如何选择合适的全局特征去描述图像内容和采用什么样的相似性度量方法进行图像匹配. 第二个研究热点是基于区域的图像检索方法,其主要思想是图像分割技术提取出图像中的物体 ...

  7. Codeforces 711D Directed Roads - 组合数学

    ZS the Coder and Chris the Baboon has explored Udayland for quite some time. They realize that it co ...

  8. 【Python042--魔法方法：算术运算】

    一.算术魔法方法的举例 1.加法(__add__)的算术运算调用减法(__sub__)的算术运算,减法(__sub__)的算术运算调用加法(__add__)的算术运算 class New_Init(i ...

  9. 一道cf水题

    题意:输入数字n表示字符串中元素个数,字符串中只含有RGB三个字符,现在要求任意两个相同的字符他们的下标之差能整除3. 思路:任意两个相同的字符的下标能整除3,也就是任意三个为一组的字符串当中的字符不 ...

  10. JSON(JavaScript Object Notation, JS 对象标记)

    JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言 ...