flex布局小案例

最新推荐文章于 2022-04-27 19:29:37 发布

薛中然

最新推荐文章于 2022-04-27 19:29:37 发布

阅读量1.1k

点赞数

分类专栏：布局方式 CSS3

本文链接：https://blog.csdn.net/sinat_36729274/article/details/80764323

版权

CSS3 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

布局方式

5 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html 
  > 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
  < 
  head 
  > 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0" 
   /> 
 
  < 
  title 
  > 
  一个骰子的布局 
  </ 
  title 
  > 
 
  < 
  style 
  > 
 
  *{ 
 
  margin: 
  0; 
 
  padding: 
  0; 
 
   } 
 
  body{ 
 
  display: 
  flex; 
 
  justify-content: 
  space-around 
 
   } 
 
  body> 
   div{ 
 
  width: 
  100px; 
 
  height: 
  100px; 
 
  display: 
  flex; 
 
  border: 
  1px 
  solid 
  greenyellow; 
 
  background-color: 
  skyblue; 
 
  box-sizing: 
  border-box 
 
   } 
 
  p{ 
 
  width: 
  10px; 
 
  height: 
  10px; 
 
  background-color: 
  rgb( 
  247, 
  19, 
  125); 
 
  border-radius: 
  50% 
 
   } 
 
  .div1 { 
 
  justify-content: 
  center; 
 
  align-items: 
  center 
 
   } 
 
  .div2{ 
 
  justify-content: 
  space-around; 
 
  flex-direction: 
  column; 
 
  align-items: 
  center; 
 
   } 
 
  .div3{ 
 
  justify-content: 
  space-around; 
 
  flex-direction: 
  column; 
 
  align-items: 
  center; 
 
  padding: 
  10px; 
 
   } 
 
  .div3> 
  p:first-child{ 
 
  align-self: 
  flex-start; 
 
   } 
 
  .div3> 
  p:last-child{ 
 
  align-self: 
  flex-end; 
 
   } 
 
  < 
  / 
  style 
  > 
 
  </ 
  head 
  > 
 
  < 
  body 
  > 
 
  < 
  div 
  class= 
  "div1" 
  > 
 
  < 
  p 
  ></ 
  p 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "div2" 
  > 
 
  < 
  p 
  ></ 
  p 
  > 
 
  < 
  p 
  ></ 
  p 
  > 
 
  </ 
  div 
  > 
 
  < 
  div 
  class= 
  "div3" 
  > 
 
  < 
  p 
  ></ 
  p 
  > 
 
  < 
  p 
  ></ 
  p 
  > 
 
  < 
  p 
  ></ 
  p 
  > 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >