简介
在本实验中,我们将探索CSS中弹性盒布局(flexbox)的居中概念。你将学习如何使用弹性盒布局在父元素内水平和垂直居中子元素。在本实验结束时,你将能够使用弹性盒布局居中技术创建响应式且视觉上吸引人的布局。
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"])
css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"])
css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"])
css/BasicConceptsGroup -.-> css/selectors("`Selectors`")
css/CoreLayoutGroup -.-> css/box_model("`Box Model`")
css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`")
css/CoreLayoutGroup -.-> css/display_property("`Display Property`")
css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`")
subgraph Lab Skills
css/selectors -.-> lab-35198{{"`响应式弹性盒布局居中技术`"}}
css/box_model -.-> lab-35198{{"`响应式弹性盒布局居中技术`"}}
css/width_and_height -.-> lab-35198{{"`响应式弹性盒布局居中技术`"}}
css/display_property -.-> lab-35198{{"`响应式弹性盒布局居中技术`"}}
css/flexbox -.-> lab-35198{{"`响应式弹性盒布局居中技术`"}}
end