CSS-0812-弹性盒子flex(父元素/子元素上的属性)-盒子/文本阴影(box-shadow、text-shadow)-圆角(border-radius)、flex弹性盒的两种居中方法

---

title: “CSS 0812”
date: 2022-08-12T16:39:55+08:00

弹性盒子

父元素(父容器)上的属性

1. 形成弹性盒子: display: flex/inline-flex;

   弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

   注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

2. 主轴方向 flex-direction属性

   • row 默认 从左到右的方向,交叉轴从上往下

   • row-reverse 从右到左 交叉轴从上往下

   • column 从上往下 交叉轴从左到右

   • column-reverse 从下往上 交叉轴从左到右

     确定主轴方向后,交叉轴方向与之垂直,且只有从上到下和从左到右两种方向。

3. 弹性盒换行 flex-wrap:nowrap(不换行)/wrap(换行)

   • 子元素横向宽度超出父元素的时,子元素宽度会被压缩,如果不想被压缩,还想换行的时可用该属性

     方向和换行的复合写法 flex-flow:方向 换行; 没有顺序

4. 子元素在主轴上的位置设置: justify-content属性

   • flex-start 主轴起点,只要形成弹性盒子,子元素会默认从主轴起点开始排列
   • flex-end 主轴终点开始排列(靠右)
   • center 主轴中心
   • space-between 主轴的两端
   • space-around 中间的留白是两端的2倍
   • space-evenly 间距平均

5. 同一行子元素在交叉轴(侧轴)上的位置: align-items属性

   • stretch 默认值，拉伸 如果交叉轴是竖着的,不设置子元素高度的话会拉伸到父元素一样高
   • flex-start 交叉轴起点
   • flex-end 交叉轴终点
   • center 交叉轴中心

6. 多行在交叉轴的位置 align-content

   • stretch 默认拉伸
   • flex-start 交叉轴起点(多行紧靠交叉轴起点)
   • flex-end 交叉轴终点(多行紧靠交叉轴起点)
   • center 交叉轴中心
   • space-around 每个子元素中间的间隙是两端间隙的2倍
   • space-between 两端(每行的第一个和最后一个子元素紧靠两端,其他元素间隙相等)
   • space-evenly 平均(所有间隙大小相等)

子元素上的属性

1. 子项排序 order:0/数值;

   • 值越大越靠后
   • 可以为负数

2. 某个子元素在交叉轴的位置 align-self属性

   • stretch 默认拉伸，当交叉轴是竖着时，如果要看到拉伸效果需要去掉子元素的高,当交叉轴是横着时，如果要看到拉伸效果需要去掉子元素的宽
   • flex-start
   • flex-end
   • center

3. 子项的放大 flex-grow:0(不放大)/数值;

4. 子项的压缩 flex-shrink:1(压缩)/0(不压缩)

   如果子元素宽度或者高度超出父容器的宽度或者高度的时候，子元素的宽或者高会被压缩，如果不想被压缩而且还想在同一行显示,可在每一个子元素身上设置不压缩属性,最后可以在父容器身上设置溢出属性

5. 子项的宽度 flex-basis:auto(本身设置了width,该auto值就是width的值)/数值px

6. 复合写法: flex:子项的放大 子项的压缩 子项的宽度; 有顺序

   flex:1; 相当于设置flex-grow:1,其他是默认值;

css3新属性-盒子/文本阴影属性

盒子阴影 box-shadow

box-shadow:水平偏移 垂直偏移 阴影模糊程度 [模糊大小] 阴影颜色 [阴影位置];

其中，带有[ ]的属性值可写可不写

• 水平偏移 向右为正 垂直偏移向下为正
• 模糊大小 阴影位置的值可有可无
• 值之间有顺序
• 阴影位置可以调整到盒子的里面 inset

文本阴影 text-shadow

text-shadow: 水平偏移 垂直偏移 阴影模糊程度 阴影颜色;

text-shadow属性值与盒子属性值相同

圆角 border-radius

border-radius:数值px/%

• 1个值:四个角
• 2个值:对角
• 3个值:左上 对角 右下
• 4个值:顺时针角

border-radius:50%;正方形变正圆,长方形变椭圆

补充：flex弹性盒子的两种居中

第一种居中方法(完美方法)

直接给弹性盒子的子元素设置margin: auto;属性：

/* 第一种居中方式(完美居中)css代码 */
.box1{
    
    
    width: 500px;height: 500px;
    background-color: pink;
    margin: auto; /* 父元素居中 */
    display: flex;/* 父元素设置为弹性盒子 */
}
.box2{
    
    
    width: 100px;height: 100px;
    background-color: aqua;
    margin: auto;
}

<!-- 第一种居中方式(完美居中)html代码 -->
<div class="box1">
    <div class="box2"></div>
</div>

结果如图所示 ：

第二中居中方法

/* 第二种居中方式(完美居中)css代码 */
.parent{
    
    
    width: 400px;height: 400px;
    background-color: rgb(155, 173, 73);
    margin: auto;
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
}
.child{
    
    
    width: 100px;height: 100px;
    background-color: aqua;
}

<!-- 第二种居中方式(完美居中)html代码 -->
<div class="parent">
	<div class="child"></div>
</div>

结果