前端学习之Flex布局

Euphoria0901
632 阅读6分钟

Flex布局

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为Flex项目(Flex item)，简称“项目”。

.box{
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; //将对象作为弹性伸缩盒显示
    display: inline-flex; //将对象作为内联块级弹性伸缩盒显示
    display: flex || inline-flex;//兼容性写法
}

容器默认存在两根主轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。

  • main start/main end：主轴开始位置/结束位置；
  • cross start/cross end：交叉轴开始位置/结束位置；
  • main size/cross size：单个项目占据主轴/交叉轴的空间； 结构示意图如下: image.png

Flex属性

Flex容器属性

1. flex-direction

决定主轴的方向（即项目的排列方向）。

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}
  • row(默认)：主轴水平方向，起点在左端；
  • row-reverse：主轴水平方向，起点在右端；
  • column：主轴垂直方向，起点在上边沿；
  • column-reverse：主轴垂直方向，起点在下边沿。

image.png

2. flex-wrap

定义换行情况。默认情况下，项目都排列在一条轴线上，但有可能一条轴线排不下。

.box{
   flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap（默认）：不换行；
  • wrap：换行，第一行在上方；
  • wrap-reverse：换行，第一行在下方。

3. flex-flow属性

是flex-direction和flex-wrap的简写，默认值为row nowrap。

.box{
    flex-flow: <flex-direction> || <flex-wrap>;
}

4. justify-content属性【水平方向对齐】

定义项目在主轴上的对齐方式。对齐方式与轴的方向有关。

  • flex-start（默认值）：左对齐；
  • flex-end：右对齐；
  • center：居中；
  • space-between：两端对齐，项目之间间隔相等；

image.png

  • space-around：每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍。 image.png

5. align-items属性【垂直方向对齐】

定义在交叉轴上的对齐方式，对齐方式与交叉轴的方向有关。

.box{
    align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start：起点对齐；
  • flex-end：终点对齐；
  • center：中点对齐；
  • baseline：项目的第一行文字的基线对齐；
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content属性

定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。所以，容器必须设置flex-wrap：nowrap | wrap | wrap-reverse；

.box{
     align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start：与交叉轴的起点对齐；
  • flex-end：与交叉轴的终点对齐；
  • center：与交叉轴的中点对齐；
  • space-between：与交叉轴的两端对齐，轴线之间的间隔平均分布；
  • space-around：每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍；
  • stretch（默认值）：轴线占满整个交叉轴。

Flex项目属性

1. order属性

定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以是负值。

.item {
    order: <整数>;
}

2. flex-grow属性

定义项目的放大比例。默认值为0，即如果空间有剩余，也不放大。可以是小数，按比例占据剩余空间。

.item{
    flex-grow: <数字>;
}

image.png 默认情况： image.png 若所有项目的flex-grow的数值都相同，则等分剩余空间。

image.png

3. flex-shrink属性

定义项目的缩小比例。默认值都为1，即如果空间不足将等比例缩小。 如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。负值对该属性无效，容器不应该设置flex-wrap。

.item {
  flex-shrink: <非负整数>; /* default 1 */
}

如果所有项目都为0，则当空间不足时，项目撑破容器而溢出。 image.png

4. flex-basis属性

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

注意设置的flex-basis是分配多余空间之前项目占据的主轴空间，如果空间不足则默认情况下该项目也会缩小。

设置flex-basis为350px，但空间充足，如下图 image.png

空间不足，项目缩小，小于设定值，如下图。 image.png

5. flex属性

是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。第一属性为必选，后两个属性可选。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6. align-self属性

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

image.png

骰子实例中的相关属性以及选择器

  • box-shadow
-webkit-box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ;
/*inset-从外层的阴影（开始时）改变阴影内侧阴影;5px-阴影大小;0-模糊距离*/
box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ;

若写了带有前缀的浏览器名简称的属性，则其原来的属性也要设置，否则报错。

  • object-fit 属性 指定元素的内容应该如何去适应指定容器的高度与宽度。一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

image.png

CSS3元素选择器

  • 匹配元素属性值中包含指定的值的元素。

[ attribute *=value ]

  • 匹配元素属性值带指定的值开始的元素。

[ attribute ^=value ]

  • 匹配元素属性值带指定的值结尾的元素。

[ attribute $=value ]

<head>
<style> 
div[class$="test"]
{
background:#ffff00;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>

</body>

image.png

:nth-child()与:nth-of-type(n)选择器

1、:nth-child() 选择器 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型，n 可以是数字、关键词或公式。

2、:nth-of-type(n) :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，n 可以是数字、关键词或公式。

<head>
<style>
	.text p:nth-child(2){/*若找到的第n个是p元素 则该p元素显示样式*/
             background-color: red;
        }
        .text span:nth-child(3){/*若找到的第n个是span元素 则该span元素显示样式*/
             background-color: pink;
        }
        .text p:nth-child(5){/*此时找到的第5个是span元素 则该span元素不显示样式*/
             background-color: yellow;
        }
        .text p:nth-of-type(3){/*找到的第3个p元素，该元素显示样式*/
             background-color: greenyellow;
        }
   </style>
</head>

<body>
	<div class="text">
            <p>1</p>
            <p>2</p>
            <span>span1</span>
            <p>3</p>
            <span>span2</span>
            <p>4</p>
        </div>
</body>
  • p:nth-of-type(3)——选择的p元素所在的父元素，下的第3个P元素 即：<p>3</p>
  • p:nth-child(2)——选择的p元素所在的父元素，下的第2个子元素，且该元素是P元素 即：<p>2</p>
  • span:nth-child(3)——选择的span元素所在的父元素，下的第3个子元素，且该元素是span元素 即：<span>span1</span>

image.png

avatar
文章
阅读
粉丝