CSS 弹性盒子

失联

已于 2023-09-13 20:54:52 修改

阅读量406

点赞数

文章标签： css 前端

于 2023-09-13 20:52:50 首次发布

本文链接：https://blog.csdn.net/2302_76607708/article/details/132829473

版权

弹性盒子

一、前言

标准盒子模型 box-sizing：content-box；

IE盒子模型(怪异盒子模型) box-sizing：border-box；

标准盒子模型有内边距时会把自己给撑大，但是IE盒子模型不会。

二、弹性盒子 flexbox

.boss{
	width:600px;
	height:400px;
	display:flex;
	border:1px solid red;
}

1. 属性

flex 用于指定弹性子元素如何分配空间。

注：flex的值为数字时，最大为12 （一定要有父级）。

#main{
	width:500px;
	height:300px;
	border:1px solid black;
	display:flex;
}

#main div{
	flex:1;
}

<div id="main">
  <div style="background-color:coral;">红色</div>
  <div style="background-color:lightblue;">蓝色</div>  
  <div style="background-color:lightgreen;">绿色</div>
</div>

在这里插入图片描述

flex-direction 属性指定单行元素在父容器中的位置。

flex-direction ：row / row-reverse / column / column-reverse ;

1. row 横向从左往右排列（左对齐）默认排序。

2. row-reverse 反转横向排列（右对齐）从后往前排，最后一项在最前面。

3. column 纵向从上往下排列。

4. row-reverse 反转纵向排列，从下往上排，最后一项在最上面。

align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

align-items：flex-start / flex-end / center / baseline / stretch;

1. flex-start 元素位于容器的开头。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

2. flex-end 元素位于容器的结尾。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

3. center 元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

4. baseline 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

5. stretch 默认值。元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

juseify-content (重点) 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

justify-content：flex-start / flex-end / center / space-between / space-around;

1. flex-start 默认值。从行首起始位置开始排列。

2. flex-end 从行尾位置开始排列。

3.center 居中排列。

4. space-between 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点。

5. space-around 均匀排列每个元素，每个元素周围分配相同的空间。

拓展：垂直水平居中

#main
{
	width:600px;
	height:300px;
	border:1px solid black;
	display:flex;
	//垂直水平居中
	justify-content:center;
	align-items:center;
}

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

flex-wrap：nawrap / wrap / wrap-reverse ;

1. nowrap 默认值。规定灵活的项目不拆行或不拆列。该情况下弹性子项可能会溢出容器

2. wrap 规定灵活的项目在必要的时候拆行或拆列。当宽度超过容器的宽度时，就会换行

3. wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

拓展：文字单行溢出变为省略号

h1
{
	width:100px;
	overflow:hidden;
	//强制文本在同一行显示
	white-space:nowrap;
	//溢出变成省略号
	text-overflow:ellipsis;
	border:1px solid black；
}

我爱中国

在这里插入图片描述
拓展：文字多行溢出变为省略号

h1
{
	width:100px;
	overflow:hidden;
	 /*设置旧版弹性盒 */
    display: -webkit-box;
      /*控制行数*/
    -webkit-line-clamp: 2;
      /*设置子元素的排列方式  垂直排列*/
    -webkit-box-orient: vertical;
      /*溢出隐藏 */
     overflow: hidden;
}