CSS：弹性（伸缩）布局display: flex及box-shadow详解

xiao__xf

已于 2022-12-07 09:44:30 修改

阅读量478

点赞数

分类专栏： web前端 # CSS 文章标签：前端 css html

于 2022-10-21 09:37:03 首次发布

原文链接：https://www.jianshu.com/p/2bcac1b556d9

版权

web前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

一、Flex

Flex很好的解决了垂直居中这个问题
Flex就是"弹性布局"，设置了flex的元素就是容器，该元素下的所有子元素都是该容器的项目

image.png

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
容器属性：

flex-direction.  
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction: 项目的排列方向

flex-direction: column  //从下到上垂直排列 
flex-direction: column-reverse   //从上到下垂直排列  
flex-direction: row    //从左到右水平排列
flex-direction: row-reverse   //从右到左水平排列

flex-wrap：换行

  flex-wrap:nowrap   //不换行
  flex-wrap:wrap   //换行，第一行在上方
  flex-wrap:wrap-reverse   //换行，第一行在下方

flex-flow: 是flex-direction和flex-wrap的简写
justify-content：项目在主轴上(水平方向上)的对齐方式

justify-content:flex-start   //（默认值）：左对齐
justify-content:flex-end  //右对齐
justify-content:center //居中
justify-content:space-between. //两端对齐，项目之间的间隔都相等。
justify-content:space-around  //每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items：项目在交叉轴上(垂直方向上)如何对齐

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

设置在项目上的属性
order ：项目的排列顺序。数值越小，排列越靠前，默认为0

order: <integer>;

flex-grow:项目的放大比例，默认为0，即不放大

flex-grow: <integer>;

flex-shrink：项目的缩小比例，默认为1，即空间不够就缩小

flex-shrink: <integer>;

flex-basis：在分配多余空间之前，项目占据的主轴空间的大小

flex-basis: <length> | auto;  /* default auto */

flex: flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self: 单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

align-self: auto | flex-start | flex-end | center | baseline | stretch;

转载自：

作者：super静_jingjing
链接：https://www.jianshu.com/p/2bcac1b556d9
来源：简书

二. box-shadow

Css边框阴影：box-shadow属性
对于这个属性，总是记了又忘，忘记了又看百度，今天总结一下；
语法：

box-shadow: h-shadow v-shadow blur spread color inset;

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

先看一下CSS3上是怎么定义的：

值	说明
h-shadow	必需的。水平阴影的位置。允许负值 (当它为正值的时候表示向右位移一定的距离【出现在元素的右边】，负值表示向左位移【出现在元素的左边】)
v-shadow	必需的。垂直阴影的位置。允许负值 (当值为负的时候表示向上偏移一定的距离【出现在元素的上方】；值为正的时候表示向下偏移一定的距离【出现的元素的下方】)
blur	可选。模糊距离（模糊半径，它的值决定了阴影的模糊程度，也就是毛光）
spread	可选。spread是表示阴影所占区域的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

重点看一下 blur【可选】
blur指的是阴影的模糊半径。这个值使得阴影部分的过渡看起来更柔和。我们可以试一试不同blur值对阴影效果的影响：

box-shadow: 10px 10px 5px rgba(0,0,0,0.9) /*blur值为5px*/ 

box-shadow: 10px 10px 10px rgba(0,0,0,0.9)/*blur值为10px*/

box-shadow: 10px 10px 15px rgba(0,0,0,0.9)/*blur值为15px*/

1
2
3
4
5
将blur值为5px、10px、15px 的效果图依次从左往右排列，可以看出来随着模糊半径数值的增大，阴影的模糊程度越高。

4. spread【可选】，一般不写
spread表示的是阴影的半径。我在网上看到有人对spread和blur的区别发出疑问，其实很简单：blur用于描述模糊半径，它的值决定了阴影的模糊程度；而spread是表示阴影所占区域的大小，这是两个不同的概念。

我们来试试其他属性值相同的情况下，spread不同时阴影的表现：

box-shadow: 10px 10px 10px 5px rgba(0,0,0,0.9);/*阴影半径为5px*/ 
box-shadow: 10px 10px 10px 15px rgba(0,0,0,0.9);/*阴影半径为15px*/ 
box-shadow: 10px 10px 10px 25px rgba(0,0,0,0.9);/*阴影半径为25px*/

1
2
3

inset 【可选】
默认情况下，我们设置的阴影都是外部阴影，而这个属性值的作用是将外部阴影转换成内部阴影。

box-shadow: 10px 10px 10px 5px blue; /*默认为外部阴影*/ 

box-shadow: 10px 10px 10px 5px blue inset;/*将外部阴影切换为内部阴影*/

1
2
3

一些常见的阴影例子：

spread【可选】，一般不写

box-shadow: 10px 0px 10px rgba(0,0,0,0.9) /*阴影出现在元素的右侧*/ 0 就是表示上下偏移量为零，所以上下没有阴影
box-shadow: -10px 0px 10px rgba(0,0,0,0.9) /*阴影出现在元素的左侧*/
box-shadow: 0px -20px 10px rgba(0,0,0,0.9)/*阴影出现在元素上方*/ 0 就是表示左右偏移量为零，所以左右没有阴影
box-shadow: 0px 20px 10px rgba(0,0,0,0.9)/*阴影出现在元素下方*/

box-shadow: 2px 2px 2px #E5E5E5, -1px -1px 1px #E5E5E5; // 给多个边框添加阴影效果

border:2px solid #eee;box-shadow: 0 0 5px rgba(0,0,0,.1);  // 四个边框都有阴影