码迷,mamicode.com
首页 > 其他好文 > 详细

flex

时间:2017-12-31 00:35:19      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:meta   网上   mat   imu   上下   参与   elf   display   区域   

<meta-name="viemport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,use-scalable=no">针对还没有开发的网页,写在head里面,对已经开发好的网页没有效果。

 

 

 

vertical-align:top   顶端对齐

vertical-align:bottom 底端对齐

vertical-align:baseline  默认情况下基线对齐

 

 

 

渐进增强:先满足网站的基本要求,(搭建网站是否保证基本功能),再根据高版本浏览器进行修改,交互等性能的改进。

优雅降级:一开始就把网站的功能全部实现,再根据低版本浏览器进行兼容。

 

 

 

flex 布局:又叫“弹性布局”为盒状模型。提供最大的灵活型,每一个容器都可以指定为flex布局。

{display:flex}

 

行内元素  {display:inline-flex}

 

flex 

以下6各属性写在容器上面:

  1  .     flex-direction:row  默认值      主轴为水平方向,起点在左端

     flex-direction:row-reverset     主轴为水平方向,起点在右端

  flex-direction:column     主轴垂直方向,起点在上沿

    flex-direction:column-reverset     主轴为垂直方向,起点在下沿

 

 

2   .     flex -wrap  默认情况下,项目排成一条线(双轴线)如果一条线排不下,换行。

flex-wrap:nowrap  默认 不换行

flex-wrap:wrap 换行 第一行在上方

flex-wrap:warp-reverse 换行 第一i行在下方

 

 

 

3   .     flex -flow 默认值 :row nowrap

   flex -flow :flex-direction

   flex -flow :flex-wrap

 

 

 

4.        justify-content 属性定义了项目在主轴上对齐

      justify-content :flex-start  默认值 左 对齐

      justify-content :flex-end  右对齐

      justify-content :center   居中

      justify-content :space-betwen 两端对齐 项目之间间隔相等

      justify-content :space-around 每个项目两侧间隔相等,所以项目之间的间隔比项目与边框的间隔大一倍

 

 

5       align-tems  属性  定义项目在叉轴上如何对齐。

align-tems:flex-start     交叉轴的起点对齐

align-tems:flex-end   交叉轴的终点对齐

align-tems:center     交叉轴的中点对齐

align-tems:baseline项目第一行的基线对齐    一般用于杂志 排版

align-tems:stretch     默认值   如果项目未设置高度或设为 auto ,将占满整个容器的高度。

 

 

 

6 .     align-content 属性:多行多轴   不常用,用的几率很小

 

 

 

 

 

 

以下6个是项目的属性:

1    order  定义了项目的排列顺序,数值越小,排列越靠前,默认为0

2     flex-grow   :定义了项目的放大比例,默认为0 .如果存在剩余空间,也不放大。

如果所有项目的flex-grow的属性都为1,则它们等分剩余空间(如果有的话),如果一个 项目的flex-grow属性都为2,其他项目都为1,则前者占数据剩余空间将比其他项多一倍。

(注:当项目的宽度大于容器的宽度时,项目不会放大。只有容器的宽度大于项目的宽度,就是告诉浏览器 当前我这个浏览器把父级所有剩余的空间填满)   (1倍 1.5  倍....)

3    flex-shrink :缩小比例,默认为1,如果空间不足,该项目将缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都等比例缩小,如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小,负值对该属性无效。 

4   flex-basis 属性 :定义在分配多余空间之前,项目占据主轴空间,浏览器根据这个属性,计算主轴是否有多余空间,它的默认值为auto,即项目本来的大小。

5  flex 属性flex-grow , flex-shrink ,flex-basis的简写 ,默认值为0  1  auto

6    align-self :允许单个项目与其他不一样的对齐方式,可覆盖align-items  默认值为auto 表继录align-items属性,如果没有父元素,stretch:   flex-start           flex-end

 

 

BFC: 块级格式上下文

block:块级元素

FC:formatting Context

定义:页面中css渲染的一个部分(区域)主要用于“决定”盒子的布局以及浮动的(相互影响的范围)的一个区域。

适用范围:只应用于BFC的子级元素,对产生BFC的元素不适用。

注:BFC 之间不影响。

 

如何触发BFC:

1     根元素

2     float 值不为none

3    position值为absolute和fixed

4    display:inline-block

       display:table-cell

  display:flex

  display:inline-flex

  display:table-caption

 

5    overflow  不为 visiable

 

 

 

 

触发BFC后,BFC的布局规则:

1    内部的块级元素在垂直方向上,一个接一个的排列;

2    块级元素垂直方向上的Margin合并(重叠)取最大值(注:同一个BFC)

3    计算BFC的高度时候,浮动元素也要参与计算;

4    BFC的区域不会与float重叠

5   每个元素的Margin  盒子左边,与包含快的boeder box 的左边挨着 (接触),浮动元素也是如此。

6   BFC(它是一个独立区域(容器)),容器里的子元素不管如何浮动的布局(排版)都不会影响容器外元素的布局。

 

 

 

这些都是我的一些课堂笔记,不是很全面。如果大家要看全面,可以在网上搜 :“阮一峰”

谢谢观看!  再见!

 

flex

标签:meta   网上   mat   imu   上下   参与   elf   display   区域   

原文地址:https://www.cnblogs.com/hemei1212/p/8151534.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!