(felx布局)中的aligns-items属性的实践

align-items属性

总有五个属性

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

1.在没有加这个属性的时候

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>align.htmltitle>
    <style>
        div {
            width: 700px;
            height: 600px;
            margin: 20px auto;
            border: 1px solid red;

            /* 弹性布局 */
            display: flex;
            /* 默认(写不写都可以) */
            flex-direction: row; 
        }
        span{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            background-color: pink;
            margin-left: 10px;
        }
        div span:nth-child(1){
            height: 150px;
        }
        div span:nth-child(3){
            height: 200px;
        }
        div span:nth-child(5){
            height: 140px;
        }
    style>
head>

<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
        <span>4span>
        <span>5span>
        <span>6span>
        <span>7span>
        <span>8span>
        
    div>
body>

html>

(felx布局)中的aligns-items属性的实践_第1张图片

2. aligin-item:flex-start

(felx布局)中的aligns-items属性的实践_第2张图片
(felx布局)中的aligns-items属性的实践_第3张图片

3. algin-items:flex-end

(felx布局)中的aligns-items属性的实践_第4张图片
(felx布局)中的aligns-items属性的实践_第5张图片

4. aligin-items:center

(felx布局)中的aligns-items属性的实践_第6张图片
(felx布局)中的aligns-items属性的实践_第7张图片

5. algin-items:baseline

当没有加这个代码的时候

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>align.htmltitle>
    <style>
        div {
            width: 700px;
            height: 600px;
            margin: 20px auto;
            border: 1px solid red;

            /* 弹性布局 */
            display: flex;
            /* 默认(写不写都可以) */
            flex-direction: row; 
        }
        span{
            width: 100px;
            height: 100px;
            font-size: 30px;
            background-color: pink;
            margin-left: 10px;
        }
        div span:nth-child(1){
            height: 150px;
        }
        div span:nth-child(3){
            height: 200px;
        }
        div span:nth-child(5){
            height: 140px;
        }
        div span:nth-child(1){
            padding-top: 30px;
        }
        div span:nth-child(3){
            padding-top: 100px;
        }
    style>
head>

<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
        <span>4span>
        <span>5span>
        <span>6span>
        <span>7span>
        <span>8span>
        
    div>
body>

html>

(felx布局)中的aligns-items属性的实践_第8张图片
当加了这个属性之后
(felx布局)中的aligns-items属性的实践_第9张图片
(felx布局)中的aligns-items属性的实践_第10张图片

6. algin-items:strecch

stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。也就是说这个属性写不写都没有影响,不写的话就会默认是这个属性。
如下代码,其中的几个没有设置高,并且没有写这个属性。

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>align.htmltitle>
    <style>
        div {
            width: 700px;
            height: 600px;
            margin: 20px auto;
            border: 1px solid red;

            /* 弹性布局 */
            display: flex;
            /* 默认(写不写都可以) */
            flex-direction: row; 
            /* align-items: stretch; */
        }
        span{
            width: 100px;
            /* height: 100px; */
            font-size: 30px;
            background-color: pink;
            margin-left: 10px;
        }
        div span:nth-child(1){
            height: 150px;
        }
        div span:nth-child(3){
            height: 200px;
        }
        div span:nth-child(5){
            height: 140px;
        }
        div span:nth-child(1){
            padding-top: 30px;
        }
        div span:nth-child(3){
            padding-top: 100px;
        }
    style>
head>

<body>
    <div>
        <span>1span>
        <span>2span>
        <span>3span>
        <span>4span>
        <span>5span>
        <span>6span>
        <span>7span>
        <span>8span>
        
    div>
body>

html>

(felx布局)中的aligns-items属性的实践_第11张图片
所以要有时候要要注意它的默认值对于没有设置高的时候的影响

你可能感兴趣的:(#,前端基础,css,css3,html)