详细看下flex弹性布局具体属性

flex容器属性详解
flex-direction:row/column;(横排/竖排) 决定元素的排列方向;
flex-wrap:nowrap/wrap/wrap-reverse(翻转); 排列不下时如何排,默认排不下就压缩进行排;
flex-flow是: flex-direction 和 flex-wrap的简写;(例如:flex-flow:row nowrap;)
justify-content:center; 元素在主轴上的对齐方式(center元素居中对齐);
align-items 元素在交叉轴的对齐方式;

flex元素属性详解
flex-grow 当有多余空间时,元素的放大比例;
flex-shirink当空间不足时,元素的缩小比例;
flex-basis 元素在主轴上占据的空间;
flex时grow / shrink / basis的简写;
order 定义元素的排列顺序;
align-self 定义元素自身的对齐方式;

容器属性

1、flex-direction:row/column; //决定 flex 元素的排列方式:横排/竖排(默认:row 横排)

div.com1{display: flex; flex-direction:row;}

2、justify-content:center/flex-start/flex-end/center/space-around;

center:左右居中对齐

flex-start:从左边开始对齐;

flex-end:从右边开始对齐;

space-around:在主轴的空间是一样的;

space-between:进行两端对齐

div.com1{display: flex; flex-direction:row; justify-content:center;}

div.com1{display: flex; flex-direction:row; justify-content:space-around;}

div.com1{display: flex; flex-direction:row; justify-content:space-between;} //两端对齐

3、align-items:flex-start/flex-end/center;元素在交叉轴的对齐方式;

flex-start:从左边开始对齐;

flex-end:从底部开始;

center:在交叉轴中间进行对齐;

stretch:当元素没有设置高度的时候,设置 strtch 让元素自动沾满容器的高度;

baseline:让元素里面的文字,更具底线进行对齐;

div.com1{display: flex; flex-direction:row; justify-content:space-between; align-items:center;}

Flex元素属性详解

1、flex-grow:1; 当有多余空间的时候,元素的放大比例;默认是0:不放大;

(可以设置:当有多余空间的时候,第二个占据两份)

div.com1{display: flex; flex-direction:row; justify-content:space-between; align-items:center;}
div.com1 div.item{width:35px; flex-grow:;}

2、flex-shrink:0/1/2;当空间不足的时候,元素的缩小比例;(0表示不压缩,1表示等比压缩,2表示当前元素被压缩2份)

div.com1{display: flex; flex-direction:row; justify-content:space-between; align-items:center;}
div.com1 div.item{width:35px; }/* 第三个不压缩 */
div.com1 div.item:nth-child(3){flex-shrink:;}

3、flex-basis:元素在主轴上占据的空间

div.com1{display: flex; flex-direction:row; justify-content:space-between; align-items:center;}
div.com1 div.item{width:35px; }/* 第三个占据 100px */
div.com1 div.item:nth-child(3){flex-basis: 100px;}

4、order:定义元素的排序

div.com1{display: flex; flex-direction:row; justify-content:space-between; align-items:center;}
div.com1 div.item{width:35px; order:;}
div.com1 div.item:nth-child(3){flex-grow:; order:;}

5、align-self:定义元素自身的对齐方式;

6、flex:是grow shrink basis 的缩写。例如:flex:1 2 25px;

flex弹性布局属性详解!的更多相关文章

  1. 弹性布局学习-详解flex-wrap(五)

    目录 弹性布局学习-介绍(一)  弹性布局学习-详解 flex-direction[决定主轴的方向](二) 弹性布局学习-详解 justify-content(三) 弹性布局学习-详解 align-i ...

  2. 弹性布局学习-详解 align-items(四)

    目录 弹性布局学习-介绍(一)  弹性布局学习-详解 flex-direction[决定主轴的方向](二) 弹性布局学习-详解 justify-content(三) 弹性布局学习-详解 align-i ...

  3. 弹性布局学习-详解align-content(六)

    弹性布局学习-详解align-content(六)

  4. 弹性布局学习-详解 justify-content(三)

    弹性布局学习-详解 justify-content(三)

  5. 弹性布局学习-详解 flex-direction【决定主轴的方向】(二)

    弹性布局学习-详解 flex-direction[决定主轴的方向](二)

  6. Android 众多的布局属性详解

    http://www.open-open.com/lib/view/open1328686184311.html Android功能强大,界面华丽,但是众多的布局属性就害苦了开发者,下面这篇文章结合了 ...

  7. android 布局属性详解

    Android功能强大,界面华丽,但是众多的布局属性就害苦了开发者,下面这篇文章结合了网上不少资料. 第一类:属性值为true或falseandroid:layout_centerHrizontal ...

  8. Android layout 布局 属性详解

    第一类:属性值 true或者 false           android:layout_centerHrizontal 水平居中     android:layout_centerVertical ...

  9. 我的Android进阶之旅------>Android 众多的布局属性详解

    Android功能强大,界面华丽,但是众多的布局属性就害苦了开发者,下面这篇文章结合了网上不少资料,希望对读者有用. 第一类:属性值为true或false android:layout_centerH ...

随机推荐

  1. tomcat http协议与ajp协议

    AJP13是定向包协议.因为性能原因,使用二进制格式来传输可读性文本.WEB服务器通过 TCP连接和SERVLET容器连接.为了减少进程生成 socket的花费,WEB服务器和SERVLET容器之间尝 ...

  2. mysql_query error:Commands out of sync;you can't run this command now

    MYSQL_REST *result没有释放, 用mysql_free_result(result)即可.

  3. EntityFramework定向加载实体

    Reference()和Collection() 方法 IList<Student> studList = context.Students.ToList<Student>() ...

  4. JAVA 多线程机制(一)

    PS:又开始忙叨JAVA了..前一阵子搞定了HTML+CSS,要开始写实验室的界面了,真没劲...博客到时候再更新吧! 先更新JAVA的吧... 多线程(一) 主要内容 1.JAVA中的线程 2.用T ...

  5. bootstrap -- css -- 辅助类

    文本 文本颜色 如果文本是个链接,则鼠标移动到链接文本上的时候,文本会变暗 .text-muted:灰色 .text-primary:浅蓝色 .text-success:绿色 .text-info:深 ...

  6. c++ timeval

    struct timeval结构体   struct timeval结构体在time.h中的定义为:struct timeval{__time_t tv_sec;        /* Seconds. ...

  7. HBase原理、基本概念、基本架构-3

    HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase是一个开源的,分布式的,多版本的,面向列的存储模型.它存储的是 ...

  8. C#委托和事件定义和使用

    委托 定义委托的语法和定义方法比较相似,只是比方法多了一个关键字delegate ,我们都知道方法就是将类型参数化,所谓的类型参数化就是说该方法接受一个参数,而该参数是某种类型的参数,比如int.st ...

  9. 实操演练!MathType几个绝妙小技巧!

    在论文中编写公式时MathType绝对是很多人不二的选择,它的功能比较完善,操作比较方便,包含的符号模板很多,易学易上手,这些都是它的优点.但是在使用MathType时,还有很多绝妙的小技巧,使用起来 ...

  10. Oracle收购Apiary来加强其API集成云

        Oracle宣布计划于1月19日收购Apiary,一家专注于API设计和协作的API管理公司.Apiary最为人所知的是API flow,其API管理平台.     Oracle并没有宣布计划 ...