flex布局

flex布局

flex模型

flex布局_第1张图片

flex布局_第2张图片

flex布局_第3张图片

flex布局_第4张图片
flex布局_第5张图片

弹性盒子flex container

flex-direction

  • row(默认值) 水平方向,起始在左端
  • row-reverse
  • column
  • column-reverse

flex-warp

  • nowarp(默认值),单行

  • warp 换行

  • warp-reverse 换行,cross-start与cross-end翻转

flex-flow flex-direction与flex-warp的简写

justify-content 元素在主轴上的对齐方式

  • flex-start(默认值) 元素紧靠主轴起点

  • flex-end 元素紧靠主轴终点

  • center 元素在中间

  • space-between 第一个元素靠起点,最后一个元素靠终点,余下元素平均分配空间

  • space-around 每个元素两侧的间隔相等。所以,元素之间的间隔比元素与容器的边距的间隔大一倍

  • space-evenly 元素间距离平均分配

align-items 所有元素在交叉轴上的对齐方式

  • stretch(默认值)元素被拉伸以适应容器

  • center 元素交叉轴中点对齐

  • flex-start 元素在交叉轴起点对齐

  • flex-end 元素在交叉轴终点对齐

  • baseline 项目第一行文字的基线对齐

align-content (多行)在交叉轴上的排列方式,当不设置父容器高度时,一般不使用该属性

  • stretch 元素被拉伸以适应容器

  • flex-start 元素在交叉轴起点对齐

  • flex-end 元素在交叉轴终点对齐

  • center 元素交叉轴中点对齐

  • space-between 第一个元素靠起点,最后一个元素靠终点,余下元素平均分配空间

  • space-around 每个元素两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

  • space-evenly 元素间距离平均分配

弹性元素flex item

align-self 单个元素在交叉轴上的对齐方式

  • stretch(默认值)元素被拉伸以适应容器

  • center 元素交叉轴中点对齐

  • flex-start 元素在交叉轴起点对齐

  • flex-end 元素在交叉轴终点对齐

flex-grow 元素分配剩余空间的比例

  • 0(默认) 即使存在剩余空间也不放大
  • flex items扩展的size不能超过max-width/max-height

例:item1 flex-grow: 2; 其余item都是1,则item1占据的剩余空间比其余的多1倍

flex-shrink

  • 1(默认)
  • flex items压缩的size不能小于min-width/min-height

例:item1 flex-shrink: 0; 其余item都是1,空间不足时,item1不缩小,其余按照原来比例缩小

flex-basis 在分配多余空间之前,项目占据的主轴空间。

  • auto(默认值) 项目本来大小

flex flex-grow、flex-shrink 、flex-basis 缩写组合。

  • none flex: 0 0 auto
  • auto flex:1 1 auto
  1. 单个值

    • 无单位,表示flex-grow
    • 有单位(px),表示flex-basis
  2. 两个值

    • 第一个必须为flex-grow
    • 第二个为flex-shrink或flex-basis
  3. 三个值

    • 第一个必须为flex-grow
    • 第二个必须为flex-shrink
    • 第三个必须为flex-basis

order

  • 0(默认值) 值越小越在前面

flex最后一行问题

DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>

	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 200px;
			background-color: pink;
		}

		.item {
			width: 30px;
			height: 30px;
			margin-bottom: 5px;
			background-color: orange;
		}


		/* 
			2. 设置span宽度为元素宽度
		*/
		.container>span {
			width: 30px;
			background-color: red;
		}
	style>
head>

<body>
	<div class="container">
		<div class="item">1div>
		<div class="item">2div>
		<div class="item">3div>
		<div class="item">4div>
		<div class="item">5div>
		<div class="item">6div>
		<div class="item">7div>
		<div class="item">8div>
		<div class="item">9div>
		<div class="item">10div>
		<div class="item">11div>
		<div class="item">12div>
		<div class="item">13div>
		<div class="item">14div>

		
		<span>span>
		<span>span>
		<span>span>
		<span>span>

	div>
body>

html>

flex布局_第6张图片

你可能感兴趣的:(html/css,css,css3,html,前端,html5)