flex在有些情况下使用更方便

第三个值设置为auto的时候，宽度就生效了

flex布局配置

设置了flex-basis之后元素上面的宽度将不再生效

flex-grow计算方式

flex-shrink的计算方式

flex布局配置

flex布局配置

flex布局属性

Flex的概念

媒体查询

<template>

    <div id="div0">

        <form>

            <div id="form">

                <div>

                    <label>姓名:</label>

                    <input type="text">

                </div>

                <div>

                    <label>请输入密码:</label>

                    <input type="text">

                </div>

                <div>

                    <label>请再次输入密码:</label>

                    <input type="text">

                </div>

            </div>

        </form>

    </div>

</template>

<script>

export default {

    data() {

        return {

        }

    },

    methods: {

    }

}

</script>

<style>

#form div {

    display: flex;

    /* margin-top: 50px; */

    /* height: 30px; */

    align-items: flex-start;

    flex: 0 0 30px;

}

#form div label {

    flex: 0 0 140px;

    text-align: left;

}

#form {

    display: flex;

    flex-direction: column;

}

</style>

判断设备访问的JS代码

flex子元素属性

555555

items 

flex换行

主轴与交叉轴

@media screen and <

outline：none输入框焦点去掉

p:nth-child(2) 第二个p属性设置

    flex-direction

  作用：子元素在父元素盒子中的排列方式

  row（从左到右）row-reverse

  column(从上到下) column-reverse

  注意：如果只设置display:flex 默认row布局方式

  flex-wrap

  作用：子元素在父元素盒子中 是否换行（列）

  nowrap默认值 不换行或者不换列

  warp 换行或换列

  flex-flow 属性的简写

  语法 flex-flow:flex-direction(排列方式) flex-wrap(换行方式)

媒体查询引入方式1

内部样式表

<style @media="(min-device-width:100px) and (max-device-width:300px)">

    #div{

        background-color:#ccc;

    }

</sytle>

width、height 浏览器可视宽、高

device-width、device-height设备屏幕显示宽、高

利用媒体查询实现响应式布局

自适应布局

• 目前最好使用rem形式，根据根元素的字体大小的改变而改变，为了便于将PX换算成rem，一般将根元素的字体大小设置成10px;

• 我们也可以通过js根据窗口的大小而改变根字体的大小，从而改变rem中的大小。

这是3.1的笔记这是3.1的笔记

一套方案 在不同尺寸 不同分辨率的视口 都能呈现出较好的效果

通过rem和flex 配合使用

em字体是根据父元素的字体大小   rem是根据根标签的字体大小  js版本计算大小

 特殊写法

外部样式

将media标签写在style标签内，适应显示

针对获取的屏幕宽度，对盒子的宽度进行百分比设置，一行显示n个的效果的具体数值为100/n %

我的非公开私密笔记