自适应css怎么写？css自适应布局方法

上篇系统介绍了flex的语法及基本知识，如果您还不熟悉flex知识，点击这里先看看《 》。本篇将结合flex基本知识去实现常见的网页布局效果，常见的经典网页布局有：上下结构，头部高度固定，下部区域高度自适应。上下结构html：<main>

上篇系统介绍了flex的语法及基本知识，如果您还不熟悉flex知识，点击这里先看看《 》。本篇将结合flex基本知识去实现常见的网页布局效果，常见的经典网页布局有：

上下结构，头部高度固定，下部区域高度自适应。

html：

<main> <header>header</header> <section>content</section></main>

css：

main{ width:100%; height:100vh; display:flex; flex-direction: column;}main > header{ height: 100px; background: #cdf0fd;}main > section{ flex-grow:1;}

左右结构，左边宽度固定，右边区域宽度自适应。

html：

<main> <nav>left nav</nav> <section>content</section></main>

css：

main{ width:100%; height:100vh; display:flex;}main > nav{ width:150px; background: #cdf0fd;}main > section{ flex-grow:1;}

上中下结构，头部和底部高度固定，中间区域高度自适应。

html：

<main><header>header</header><section>content</section><footer>footer</footer></main>

css：

main{ width:100%; height:100vh; display:flex; flex-direction: column;}main > header,main > footer{ height: 100px; background: #cdf0fd; }main > section{ flex-grow:1;}

左中右结构，左边和右边宽度固定，中间区域宽度自适应。

html：

<main><nav>left nav</nav><section>content</section><aside>right aside</aside></main>

css：

main{ width:100%; height:100vh; display:flex;}main > nav,main > aside{ width:150px; background: #cdf0fd; }main > section{ flex-grow:1;}

圣杯布局，就是中间区域再嵌套其它结构。

1、上中下结构里，中间区域嵌套左中右结构

html：

<main> <header>header</header><section> <!--嵌套左中右结构--> <nav>left nav</nav> <section>content</section> <aside>right aside</aside></section><footer>footer</footer></main>

css：

main{ width:100%; height:100vh; display:flex; flex-direction: column;}main > header, main > footer{ height: 100px; background: #cdf0fd; }main > section{ flex-grow:1; display:flex;}/*嵌套的左中右结构*/main > section > nav,main > section > aside{ width:150px; background: #fdcdcd; }main > section > section{ width:100%; flex-grow:1;}

2、左中右结构里，中间区域嵌套上中下结构

html：

<main> <nav>left nav</nav> <section> <!--嵌套上中下结构--> <header>header</header> <section>content</section> <footer>footer</footer> </section><aside>right aside</aside></main>

css：

main{ width:100%; height:100vh; display:flex; }main > nav,main > aside{ width:150px; background: #cdf0fd; }main > section{ flex-grow:1; width:100%; display:flex; flex-direction: column;}/*嵌套的上中下结构*/main > section > header,main > section > footer{ height: 100px; background: #fdcdcd; }main > section > section{ flex-grow:1;}

9宫格布局

html：

<main> <section>content 1 </section> <section>content 2 </section> <section>content 3 </section> <section>content 4 </section> <section>content 5 </section> <section>content 6 </section> <section>content 7 </section> <section>content 8 </section> <section>content 9 </section> </main>

css：

main{ width:100%; height:100vh; display:flex; flex-wrap: wrap; }main > section{ width: 30%; background:#55ff00; margin: 1.5%;}

总结

以上是常见的经典布局，在这些布局的基础上可以组合、拆分制作各种各样的布局，如果结合position:fixed定位还可以实现头部或侧边栏固定的布局效果。

以上布局使用传统的float、position也可以实现，只是相对来说比较麻烦一些，已不建议使用，所以了解下就可以了。

虽然flex可以满足大部分布局，但是flex并不擅长栅格布局，后面会介绍display:grid（网格布局），网格是一组相交的水平线和垂直线，它定义了网格的列和行。所以使用网格布局能够构建更加复杂的网页设计。

感谢关注，希望能够给你有所帮助，欢迎提出错误，补充。

上篇：

下篇：前端入门 —— 网格布局（Grid）

源码链接: https://pan.baidu.com/s/1bdZM8ZcdU3FdSCp2u0sx8A?pwd=9ub2 提取码: 9ub2

以上就是小编给大家带来的关于'自适应css怎么写？css自适应布局方法'的探讨分享，希望大家通过阅读小编的文章之后能够有所收获！如果大家觉得小编的文章不错的话，可以多多分享给有需要的人。