您当前的位置： 首页 >  css

知其黑、受其白

暂无认证

  • 5浏览

    0关注

    1250博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

css 弹性布局

知其黑、受其白 发布时间：2022-07-12 18:18:15 ，浏览量：5

阅读目录
  • CSS flex 属性
    • 一、声明定义
      • 1 声明块级弹性盒子 display:flex
      • 2 声明内联级弹性盒子 display:inline-flex
    • 二、flex-direction：用于控制盒子元素排列的方向
      • row-reverse 从右向左排列元素
      • column-reverse 从下到上垂直排列元素
    • 三、flex-wrap
      • 行元素换行 row 、wrap
      • 水平排列反向换行 row 、wrap-reverse
      • 垂直元素换行 column 、wrap
      • 垂直元素反向换行 column wrap-reverse
    • 四、flex-flow
  • 轴说明
    • 水平排列
    • 垂直排列
    • justify-content
      • 水平排列元素，并使用 justify-content: flex-end 对齐到主轴终点
      • 使用 space-evenly 平均分配容器元素
      • 垂直排列时对齐到主轴终点
    • 交叉轴行
      • align-items 用于控制容器元素在交叉轴上的排列方式
        • （1）横向排列
        • （2）纵向排列
      • align-content 只适用于多行显示的弹性容器，用于控制行（而不是元素）在交叉轴上的排列方式
        • 水平排列在交叉轴中居中排列
        • 垂直排列时交叉轴的排列
    • 弹性元素
      • 1. align-self

CSS flex 属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：

DOCTYPE html>


 
菜鸟教程(runoob.com)
 
#main
{
	width:220px;
	height:300px;
	border:1px solid black;
	display:flex;
}

#main div
{
	flex:1;
}





  红色
  蓝色  
  带有更多内容的绿色 div


注意: Internet Explorer 9 及更早版本不支持 flex 属性。
注意: Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。
注意: Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。

在这里插入图片描述

一、声明定义

容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。

1 声明块级弹性盒子 display:flex 
DOCTYPE html>


	
	
	
        * {
            padding: 0;
            margin: 0;
        }
 
        article {
            height: 150px;
            margin-left: 100px;
            margin-top: 100px;
            outline: solid 5px silver;
            display: flex;
            padding: 20px;
        }
 
        article div {
            outline: solid 5px orange;
            text-align: center;
            font-size: 28px;
            line-height: 5em;
            width: 300px;
        }
    



	
        1
        2
        3

在这里插入图片描述

2 声明内联级弹性盒子 display:inline-flex 
DOCTYPE html>


	
	
	
        * {
            padding: 0;
            margin: 0;
        }
 
        article {
            height: 150px;
            margin-left: 100px;
            margin-top: 100px;
            outline: solid 5px silver;
            display: inline-flex;
            padding: 20px;
        }
 
        article div {
            outline: solid 5px orange;
            text-align: center;
            font-size: 28px;
            line-height: 5em;
            width: 300px;
        }
    



	
        1
        2
        3

在这里插入图片描述

二、flex-direction：用于控制盒子元素排列的方向

使用在 display:flex 的父容器里，改变横轴的方向：

值描述row从左到右水平排列元素（默认值）row-reverse从右向左排列元素column从上到下垂直排列元素column-reverse从下到上垂直排列元素 row-reverse 从右向左排列元素 
DOCTYPE html>


	
	
	
	   * {
		  padding: 0;
		  margin: 0;
		}
		body {
		  margin: 100px;
		  font-size: 14px;
		  color: #555;
		}
		article {
		  width: 500px;
		  border: solid 5px silver;
		  display: flex;
		  box-sizing: border-box;
		  padding: 10px;
		 /* row-reverse   从右向左排列元素 */
		  flex-direction: row-reverse;
		}
		article * {
		  border: solid 5px orange;
		  padding: 10px;
		  margin: 10px;
		}
    



	
        1
        2
        3

在这里插入图片描述

column-reverse 从下到上垂直排列元素 
DOCTYPE html>


	
	
	
		* {
          padding: 0;
          margin: 0;
        }
        body {
          margin: 100px;
          font-size: 14px;
          color: #555;
        }
        article {
          width: 500px;
          border: solid 5px silver;
          display: flex;
          box-sizing: border-box;
          padding: 10px;
         /* column-reverse  从下到上垂直排列元素 */
          flex-direction: column-reverse;
        }
        article * {
          border: solid 5px orange;
          padding: 10px;
          margin: 10px;
        }
    



	
        1
        2
        3

在这里插入图片描述

三、flex-wrap

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

选项说明nowrap元素不拆行或不拆列（默认值）wrap容器元素在必要的时候拆行或拆列。wrap-reverse容器元素在必要的时候拆行或拆列，但是以相反的顺序 行元素换行 row 、wrap 
DOCTYPE html>


	
	
	
		* {
            padding: 0;
            margin: 0;
            outline: solid 1px silver;
            padding: 10px;
            margin: 10px;
        }
        head {
            display: block;
			background:#eee;
        }
        body {
            font-size: 14px;
            color: #555;
        }
        article {
            width: 500px;
            height: 250px;
            border: solid 5px silver;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        article div {
            border: solid 5px orange;
            padding: 30px 80px;
            margin: 10px;
            text-align: center;
            font-size: 28px;
        }
    



	
        1
        2
        3

在这里插入图片描述

水平排列反向换行 row 、wrap-reverse 
flex-direction: row;
flex-wrap: wrap-reverse;

在这里插入图片描述

DOCTYPE html>


	
	
	
		* {
            padding: 0;
            margin: 0;
            outline: solid 1px silver;
            padding: 10px;
            margin: 10px;
        }
        head {
            display: block;
			background:#eee;
        }
        body {
            font-size: 14px;
            color: #555;
        }
        article {
            width: 500px;
            height: 250px;
            border: solid 5px silver;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            flex-direction: row;
			flex-wrap: wrap-reverse;
        }
        article div {
            border: solid 5px orange;
            padding: 30px 80px;
            margin: 10px;
            text-align: center;
            font-size: 28px;
        }
    



	
        1
        2
        3
垂直元素换行 column 、wrap 
flex-direction: column;
flex-wrap: wrap;

在这里插入图片描述

DOCTYPE html>


	
	
	
		* {
            padding: 0;
            margin: 0;
            outline: solid 1px silver;
            padding: 10px;
            margin: 10px;
        }
        head {
            display: block;
			background:#eee;
        }
        body {
            font-size: 14px;
            color: #555;
        }
        article {
            width: 500px;
            height: 350px;
            border: solid 5px silver;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            flex-direction: column;
			flex-wrap: wrap;
        }
        article div {
            border: solid 5px orange;
            padding: 30px 80px;
            margin: 10px;
            text-align: center;
            font-size: 28px;
        }
    



	
        1
        2
        3
垂直元素反向换行 column wrap-reverse 
flex-direction: column;
flex-wrap: wrap-reverse;

在这里插入图片描述

DOCTYPE html>


	
	
	
		* {
            padding: 0;
            margin: 0;
            outline: solid 1px silver;
            padding: 10px;
            margin: 10px;
        }
        head {
            display: block;
			background:#eee;
        }
        body {
            font-size: 14px;
            color: #555;
        }
        article {
            width: 500px;
            height: 350px;
            border: solid 5px silver;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            flex-direction: column;
			flex-wrap: wrap-reverse;
        }
        article div {
            border: solid 5px orange;
            padding: 30px 80px;
            margin: 10px;
            text-align: center;
            font-size: 28px;
        }
    



	
        1
        2
        3
四、flex-flow

是 flex-direction 与 flex-wrap 的组合简写模式。

下面是从右向左排列，换行向上拆分行。

在这里插入图片描述

DOCTYPE html>


	
	
	
		* {
            padding: 0;
            margin: 0;
            outline: solid 1px silver;
            padding: 10px;
            margin: 10px;
        }
        head {
            display: block;
			background:#eee;
        }
        body {
            font-size: 14px;
            color: #555;
        }
        article {
            width: 500px;
            height: 350px;
            border: solid 5px silver;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            flex-flow: row-reverse wrap-reverse;
        }
        article div {
            border: solid 5px orange;
            padding: 30px 80px;
            margin: 10px;
            text-align: center;
            font-size: 28px;
        }
    



	
        1
        2
        3
		4
轴说明 水平排列

下面是使用 flex-flow: row wrap 的主轴与交叉轴说明。 在这里插入图片描述 下面是使用 flex-flow: row-reverse wrap-reverse 的主轴与交叉轴说明。

在这里插入图片描述

垂直排列

下面是使用 flex-flow: column wrap 的主轴与交叉轴说明。

在这里插入图片描述

justify-content

用于控制元素在主轴上的排列方式，再次强调是主轴的排列方式。

选项说明flex-start元素紧靠主轴起点flex-end元素紧靠主轴终点center元素从弹性容器中心开始space-between第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间space-around每个元素两侧的间隔相等。所以，元素之间的间隔比元素与容器的边距的间隔大一倍space-evenly元素间距离平均分配 水平排列元素，并使用 justify-content: flex-end 对齐到主轴终点

在这里插入图片描述

DOCTYPE html>


	
	
	
	* {
		padding: 0;
		margin: 0;
		padding: 10px;
		margin: 10px;
	  }
	  body {
		font-size: 14px;
		color: #555;
	  }
	  article {
		border: solid 5px silver;
		box-sizing: border-box;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-end;
	  }
	  article div {
		width: 80px;
		border: solid 5px orange;
		text-align: center;
		font-size: 28px;
	  }
    



	
        1
        2
        3
		4
使用 space-evenly 平均分配容器元素 
 flex-flow: row wrap;
 justify-content: space-evenly;

在这里插入图片描述

DOCTYPE html>


	
	
	
	* {
		padding: 0;
		margin: 0;
		padding: 10px;
		margin: 10px;
	  }
	  body {
		font-size: 14px;
		color: #555;
	  }
	  article {
		border: solid 5px silver;
		box-sizing: border-box;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
	  }
	  article div {
		width: 80px;
		border: solid 5px orange;
		text-align: center;
		font-size: 28px;
	  }
    



	
        1
        2
        3
		4
垂直排列时对齐到主轴终点 
 flex-flow: column wrap;
 justify-content: flex-end;

在这里插入图片描述

DOCTYPE html>


	
	
	
	* {
		padding: 0;
		margin: 0;
		padding: 10px;
		margin: 10px;
	  }
	  body {
		font-size: 14px;
		color: #555;
	  }
	  article {
		border: solid 5px silver;
		box-sizing: border-box;
		display: flex;
		flex-flow: column wrap;
		justify-content: flex-end;
	  }
	  article div {
		width: 80px;
		border: solid 5px orange;
		text-align: center;
		font-size: 28px;
	  }
    



	
        1
        2
        3
		4
交叉轴行 align-items 用于控制容器元素在交叉轴上的排列方式 选项说明stretch元素被拉伸以适应容器（默认值）center元素位于容器的中心flex-start元素位于容器的交叉轴开头flex-end元素位于容器的交叉轴结尾 （1）横向排列

拉伸适应交叉轴

如果设置了 width | height | min-height | min-width | max-width | max-height ，将影响stretch 的结果，因为 stretch 优先级低于你设置的宽高。

在这里插入图片描述

DOCTYPE html>


	
	
	
	* {
		padding: 0;
		margin: 0;
		padding: 10px;
		margin: 5px;
	  }
	  head {
		display: block;
	  }
	  body {
		font-size: 14px;
		color: #555;
	  }
	  article {
		height: 200px;
		border: solid 5px silver;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: stretch;
	  }
	  article div {
		width: 80px;
		border: solid 5px orange;
		text-align: center;
		font-size: 28px;
	  }
    



	
        1
        2
        3
		4

对齐到交叉轴的顶部

flex-direction: row;
align-items: flex-start;

在这里插入图片描述

对齐到交叉轴底部

flex-direction: row;
align-items: flex-end;

在这里插入图片描述

对齐到交叉轴中心

flex-direction: row;
align-items: center;

在这里插入图片描述

（2）纵向排列

纵向排列时交叉轴排列

在这里插入图片描述

DOCTYPE html>


	
	
	
		* {
			padding: 0;
			margin: 0;
			padding: 10px;
			margin: 5px;
		  }
		 
		  article {
			height: 400px;
			border: solid 5px silver;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
		  }
		 
		  article div {
			height: 50px;
			min-width: 100px;
			border: solid 5px orange;
			text-align: center;
			font-size: 28px;
		  }
    



	
        1
        2
        3
		4
align-content 只适用于多行显示的弹性容器，用于控制行（而不是元素）在交叉轴上的排列方式 选项说明stretch将空间平均分配给元素flex-start元素紧靠主轴起点flex-end元素紧靠主轴终点center元素从弹性容器中心开始space-between第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间space-around每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍space-evenly元素间距离平均分配 水平排列在交叉轴中居中排列

在这里插入图片描述

DOCTYPE html>


	
	
	
		* {
            padding: 0;
            margin: 0;
            padding: 10px;
            margin: 5px;
        }
        article {
            height: 300px;
            border: solid 5px silver;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            align-content: center;
        }
        article div {
            width: 90px;
            border: solid 5px orange;
            text-align: center;
            font-size: 28px;
        }
    



	
        1
        2
        3
		4
垂直排列时交叉轴的排列 
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
align-content: center;

在这里插入图片描述

弹性元素

放在容器盒子中的元素即为容器元素。

不能使用 float 与 clear 规则
弹性元素均为块元素
绝对定位的弹性元素不参与弹性布局
1. align-self

用于控制单个元素在交叉轴上的排列方式，align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一个弹性元素的交叉轴排列。

选项说明stretch将空间平均分配给元素flex-start元素紧靠主轴起点flex-end元素紧靠主轴终点center元素从弹性容器中心开始

在这里插入图片描述

DOCTYPE html>


	
	
	
		* {
            padding: 0;
            margin: 0;
            padding: 10px;
            margin: 5px;
        }
        article {
            height: 400px;
            border: solid 5px silver;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        article div {
            height: 50px;
            min-width: 50px;
            border: solid 5px orange;
            text-align: center;
            font-size: 28px;
        }
        article div:nth-of-type(1) {
            /* 元素紧靠主轴起点 */
            align-self: flex-start;
        }
        article div:nth-of-type(3) {
            /* 	元素紧靠主轴终点 */
            align-self: flex-end;
        }
    



	
        1
        2
        3
		4
关注
打赏
1665558895
查看更多评论

最近更新

热门博客

[ 申请 ]友情链接：

ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录

0.0931s