CSS技巧

[yingwinwin]

• 高度自适应盒子滚动

实现高度自适应盒子滚动

import React, { Component } from 'react'
import '../css/scroll.less'

export default class Scroll extends Component {
    constructor(){
        super()
        let arr = []
        for(let i=0;i<200 ; i++){
            arr.push('第'+i+'项')
        }
        this.state={
            arr
        }
    }

    render() {
        return (
            <div className="wrap">
                <header>123</header>
                <nav>123</nav>
                <content>
                    <ul>
                        {
                            this.state.arr.map(item=>{
                                return <li key={item}>item</li>
                            })
                        }
                    </ul>
                </content>
            </div>
        )
    }
}

*{
    margin: 0;
    padding: 0;
}
.wrap{
    display: flex;   //给大盒子添加，flex布局属性
    flex-direction: column;    // 添加垂直布局
    height: 100vh;    // 添加屏幕整体高度为视口高度

    header{
        border: 1px solid #000;
        box-sizing: border-box;
        width: 100%;
        height: 2.5rem;
    }

    nav{
        border: 1px solid #000;
        box-sizing: border-box;
        height: 3.75rem;
        width: 100%;
    }

    content{
        overflow-y: auto;    // 让要滚动的盒子，设置滚动属性
        flex: 1;    //占flex局部为1
        ul{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            li{
                border: 1px solid #000;
                width: 2.5rem;
                height: 1.875rem;
            }
        }
    }
}

效果

[yingwinwin]

大佬的css文章

布局技巧

/* 文字在盒子中自适应两边对齐 */
text-align-last: justify;  

效果:

/* 文字竖过来排版 */
writing-mode: vertical-rl;