css布局 flex布局 grid网格布局 布局练习

CSS布局

flex是CSS3中新增的布局手段，它主要用来代替浮动来完成页面的布局。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

• 弹性容器：要使用弹性盒，必须先将一个容器设置为弹性容器
  • display:flex设置为块级弹性容器
  • display:inline-flex设置为行内的弹性容器。
• 弹性元素：弹性容器的直接子元素

主轴：弹性元素的排列方式为主轴
侧轴：与主轴垂直方向为侧轴

flex布局

面试题

• flex布局 说出父元素和子元素上的属性
• flex的使用，如何实现左右贴边
• 左边固定宽，右边自适应

弹性容器上的样式

• flex-direction 指定容器中弹性元素的排列方式，设置主轴方向
• flex-wrap 设置弹性元素是否在弹性容器中自动换行
• flex-flow是flex-wrap 和 flex-direction的简写属性，没有顺序
• justify-content如何分配主轴上的空白空间，主轴上的元素如何排列
• align-item 元素在侧轴上如何对齐，每行元素在侧轴上如何对齐，单行元素对齐时考虑使用
• align-content侧轴空白空间的分布，把所有行元素看成一个整体，元素和空白之间如何对齐，多行元素一起对齐时考虑使用

justify开头表示与主轴相关
align开头表示侧轴相关

flex-direction指定容器中弹性元素的排列方式，设置主轴方向
row 默认值，弹性元素在容器中水平排列 从左向右
row-reverse 默认值，弹性元素在容器中水平排列 从右向左
column 弹性元素纵向排列 自上向下
column-reverse 弹性元素纵向排列 自下向上

flex-wrap 设置弹性元素是否在弹性容器中自动换行
nowrap:默认值，元素不会自动换行
wrap:元素沿着侧轴方向自动换行
wrap-reverse:元素沿着侧轴的反方向自动换行

justify-content 如何分配主轴上的空白空间，主轴上的元素如何排列
flex-start:元素沿着主轴的起边排列
flex-end:元素沿着主轴的终边排列
center：元素居中排列
space-around：空白分布在元素的两侧
space-evenly: 空白分布在元素的单侧
space-between：空白分布在两个元素间

align-content侧轴空白空间的分布，元素和空白之间如何对齐
center:元素在中间
flex-start:元素在侧轴起边
flex-end:元素在侧轴终边对齐
space-between：空白分布在两行元素之间
space-around：空白分布在元素的两侧

align-item 元素在侧轴上如何对齐，每行元素在侧轴上如何对齐
stretch 默认值，将一行的所有元素长度设置为相同的值，不同行长度可能不一样

flex-start:元素不会拉伸，沿着侧轴起边对齐
flex-end:元素不会拉伸，沿着侧轴终边对齐
flex-center:居中对齐

弹性元素上的样式

align-self用来覆盖当前弹性元素上的align-items

flex-grow：弹性元素的增长系数
默认为0，即如果存在剩余空间，也不放大

flex-shrink：弹性元素的缩减系数
默认为1，即如果空间不足，该弹性元素将缩小
综合缩减系数和元素大小来计算

flex-basis：元素在主轴上的基础长度
默认为auto 表示参考元素自身的高度或者宽度

可以想象成弹簧，flex-basis表示弹簧原始状态，flex-shrink表示弹簧的压缩状态，flex-grow表示弹簧的伸长状态

order:x 决定弹性盒子的排列顺序，数值越小，排列越靠前，默认为0。

flex属性

flex 是flex-grow + flex-shrink + flex-basis 的缩写，这里顺序不能变。

单值语法	等同于
flex:initial	flex:0 1 auto
flex:0	flex:0 1 0%
flex:none	flex:0 0 auto
flex:1	flex:1 1 0%
flex:auto	flex:1 1 auto
flex 取值为一个长度或百分比n	flex:1:1:npx/n% 百分比相对于父元素
flex 取值为一个非负数字x	flex:x 1 0%
flex 取值为非负数字x y	flex:x y 0%

flex:1的含义

flex 是flex-grow + flex-shrink + flex-basis 的缩写，这里顺序不能变。
flex-grow 定义子元素在父元素中放大的比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink定义了弹性元素的缩小比例，默认为1，即如果空间不足，该弹性元素将缩小
flex-basis元素在主轴上的基础长度,默认auto，在容器不足时会最大化内容尺寸，显示本身的大小
s
flex:auto 在容器不足时会最大化内容尺寸，显示本身的大小
flex:1 等同于flex:1 1 0% 表示可以增长，可以收缩，但在容器不足时会优先最小化内容尺寸。

<style>
    .container{
        width: 300px;
        display: flex;
     }
     div{
         border: 1px solid red;
     }
     div:first-child{  
        flex: 1 1 auto; 
    }
 </style>
 <div class="container">
    <div >我是一个div</div>
    <div >我是一个很多字div</div>
    <div >我是一个更多字而且第三个div</div>
</div>

div:first-child{  
     flex: 1 1 0%; 
}

grid网格布局

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

是什么
grid网格布局：采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
项目只能是容器的顶层子元素，不包含项目的子元素，Grid 布局只对项目生效

概念

• 容器属性:定义在容器上
• 项目属性:定义在项目上
• 网格线:项目边缘的线

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

值大小

• fr:值:fraction的缩写，容器内剩余空间的占几份
• min-content: 根据元素内容来设置的最小宽度大小
• max-content: 将尺寸设置成内容尺寸能达到的最大宽度。
• minmax(最小值，最大值) 对自适应的网格设置最小值和最大值
• fit-content(值)：如果内容的宽度小于fit-content中设置的值，子元素宽度取内容宽度。反之取设置的长度。
• repeat(循环次数，值) 循环控制模式,repeat的第一个参数可以使用auto-fit和auto-fill

容器属性

• grid-template-columns定义每一列的列宽
• grid-template-rows定义每一行的行高
• grid-template-areas 定义区域名，由单个或多个单元格组成
• grid-row-gap 设置行与行的间隔
• grid-column-gap 设置列与列的间隔
• grid-gap: <grid-row-gap> <grid-column-gap> grid-column-gap和grid-row-gap的合并简写形式，也可以直接写做 gap

值可以是以下两个函数
repeat(重复的次数，值/模式) 值就重复这个值几次，模式就重复这个模式几次
minmax(最小，正常)当剩余空间不足时，

/*
值也可以是百分比
auto,自动根据容器调整
1fr 占一份 2fr占2份
*/
grid-template-columns: 100px 100px 100px;/*将容器设为三列，每列的列宽为100px*/
grid-template-columns: repeat(3,100px);
grid-template-columns: repeat(2,50px 100px);/*模式:重复50px 100px两次*/
grid-template-columns: repeat(auto-fit, 100px); /* 自适应列数， 每列100px */
grid-template-rows: 100px 100px 100px; /*将容器设为三行，每列的行高为100px*/

整个内容区域在容器里面的水平/垂直位置

• justify-content: start | end | center | stretch | space-around(空白分布在元素的两侧) | space-between(空白分布在两行元素之间) | space-evenly水平方向
• align-content: start | end | center | stretch | space-around | space-between | space-evenly垂直方向
• place-content: <align-content> <justify-content>简写

项目内容在单元格中的水平/垂直位置

• justify-items: start | end | center | stretch水平方向
• align-items: start | end | center | stretch 垂直方向
• place-items: <align-item> <justify-itemst>简写

给网格布局指定区域

• grid-template-areas：一个区域由单个或多个单元格组成，用于定义网格的名字

grid-template-areas:"a a c"/*同名表示一个区域*/
                    "b e f"
                    "b . f" /*不想命名使用.表示*/

项目属性

控制项目占据容器的位置
通过网线的方式，从1开始

• grid-row-start/grid-row-end:值:项目所在位置的行起始/结尾
• grid-column-start/grid-column-end:值:项目所在位置的列起始/结尾
  
  通过网格名字的方式grid-template-areas
• grid-column-start/grid-column-end:单元格的名字-start/单元格的名字-end

/*中间的网格是e*/
  .item{
    grid-row-start: e-start;
    grid-row-end: e-end;
    grid-column-start: e-start;
    grid-column-end: e -end;
    /*简写*/
	grid-row:e-start/e-end;
	grid-column:e-start/e-end;
	grid-row:e; 
	grid-column:e;
  }

通过项目的grid-area属性，定义项目在容器中的具体位置

.item{
	grid-area:e;
}

占两格

  .gird_Box {
    width: 600px;
    height: 600px;
    display: grid;
    border: 1px solid red;
    grid-template-columns:repeat(3,200px) ;
    grid-template-rows:repeat(3,200px) ;
    margin:100px auto;
    grid-template-areas:"a a c"/*同名表示一个区域*/
                        "d e f"
                        "g . r" /*不想命名使用.表示*/
    ;
  }
  .item{
    background-color: pink;
    grid-area: a;
  }

控制项目中(单个项目比如九宫格中的第一个)的内容相对项目的一个对齐方式

• justify-self: 定义项目在容器中的水平对齐方式
• align-self: 定义项目在容器中的垂直对齐方式
• place-self:align-self,justify-self简写格式

案例

左边固定右边自适应

flex实现

<style>
.box {
    height: 500px;
    display: flex;
}
.box .right {
    flex: 1; //flex:auto
    border: 1px solid #000000;
}

.box .left {
    border: 1px solid #000000;
    flex-basis: 100px;
}
</style>
<body>
	<div class="box">
		<div class="left">左边固定效果</div>
		<div class="right">右边自适应效果</div>
	</div>
</body>

grid实现

<style>
  .gird_Box {
    height: 500px;
    display: grid;
    grid-template-columns:100px 1fr;
  }
  .left{
    background-color: skyblue;
  }
  .right{
    background-color: pink;
  }

</style>
<body>
<div class="gird_Box">
  <div class="left">左边固定</div>
  <div class="right">右边自适应</div>
</div>
</body>

三等分布局

flex实现了三个等分布局

.container{
        width: 300px;
        display: flex;
}
div{
        border: 1px solid red;
        flex: 1;
 }  

<body>
    <div class="container">
        <div class="left">我是左边的div</div>
        <div class="center">我是中间的div我是中间的div</div>
        <div class="right">我是右边的div我是右边的div我是右边的div</div>
     </div>
</body>      

grid实现三等分布局

.container{
        width: 300px;
        display: grid;
        grid-template-columns:1fr 1fr 1fr;
}
div{
        border: 1px solid red;   
 }       

<body>
    <div class="container">
        <div class="left">我是左边的div</div>
        <div class="center">我是中间的div我是中间的div</div>
        <div class="right">我是右边的div我是右边的div我是右边的div</div>
     </div>
</body>

圣杯布局

笔记地址