CSS3 레이아웃 속성은 무엇입니까?-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

CSS3 레이아웃 속성은 무엇입니까?

青灯夜游

Feb 25, 2022 pm 06:12 PM

css3레이아웃 속성

css3 레이아웃 속성에는 flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, order, flex-grow, flex-shrink 등이 포함됩니다.

CSS3 레이아웃 속성은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

1. 유연한 상자 모델(Flexible Box 또는 Flexbox)

Flexbox 모델의 가장 큰 특징은 다양한 크기의 화면에 적합한 레이아웃을 충족하도록 하위 요소의 너비와 높이를 동적으로 수정할 수 있다는 것입니다. .

(1) 유연한 컨테이너 속성

flex-direction: 주축 방향을 설정하고 유연한 하위 요소의 배열을 결정합니다.

flex-wrap: 유연한 하위 요소가 범위를 초과할 때 래핑할지 여부 유연한 컨테이너

flex-flow: flex - 방향 및 플렉스 랩 속성, 복합 속성에 대한 단축키

justify-content: 주축 정렬

align-items: 교차축 정렬

align-content: 가로축, 옆축에 공간이 있는 경우 축 정렬

(2) 유연한 하위 요소 속성

order: 플렉스 컨테이너의 하위 요소 순서 제어

flex-grow: 확장 비율 설정 flex 하위 요소

flex-shrink: 탄성 하위 요소의 수축 비율 설정,

flex-basis: 늘리기 전 탄성 하위 요소의 기본 크기 값을 지정합니다. 이는 너비 및 높이 속성과 동일합니다.

flex : flex-grow, flex-shrink 및 flex-basis 속성의 복합 속성

align-self : 독립적인 유연한 하위 요소가 유연한 컨테이너의 기본 정렬 설정을 재정의하도록 허용

Flexbox 메뉴 항목 실제 전투

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Flexbox</title>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <!--
          响应式菜单html架构，emmet的方式进行简写
          ul.menu>li*6>a[href="#"]{HTML}
      -->
      <ul class="menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">Sass</a></li>
          <li><a href="#">Ruby</a></li>
          <li><a href="#">Mongo</a></li>
      </ul>
  </body>
  </html>

.menu{
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-flow: row wrap;
  }
   
  .menu li{
      height: 40px;
      text-align: center;
      line-height: 40px;
      flex: 1 1 100%;
  }
   
  .menu li:nth-child(1){
      background-color: #39ADD1;
  }
  .menu li:nth-child(2){
      background-color: #3079AB;
  }
  .menu li:nth-child(3){
      background-color: #982551;
  }
  .menu li:nth-child(4){
      background-color: #E15258;
  }
  .menu li:nth-child(5){
      background-color: #CC6699;
  }
  .menu li:nth-child(6){
      background-color: #52AC43;
  }
   
  @media  (min-width:480px) {
      .menu li{
          flex: 1 1 50%;
      }
  }
   
  @media  (min-width:768px) {
      .menu{
          flex-flow: row nowrap;
      }
  }

2. 다중 열 상세 설명

속성 목록:

columns: 복합 속성(열 너비 및 열 개수), 열 너비 및 개수 설정

열 너비: 너비 설정 각 열의

column-count: 열 수 설정

column-gap: 열 사이의 간격 설정

column-rule: 복합 속성(column-rule-너비, 열-규칙-스타일, 열-규칙- color), 열 사이의 테두리 스타일을 설정합니다.

column-fill: 열 높이가 균일한지 여부를 설정합니다.

column-span: 모든 열에 걸쳐 있는지 여부를 설정합니다.

3 미디어 쿼리

모범 사례:

/*超小屏幕（手机，小于768px)*/
  /*没有任何媒体查询相关的代码，移动设备优先*/
   
  /*小屏幕（平板，大小等于768）*/
  @media (min-width: 768px) {
   
  }
   
  /*中等屏幕（桌面显示器，大于等于992px)*/
  @media (min-width: 992px) {
   
  }
   
  /*大屏幕（大桌面显示器，大于等于1200px)*/
  @media (min-width: 1200px) {
   
  }

(학습 영상 공유: css 영상 튜토리얼, 웹 프론트엔드 입문 튜토리얼)

위 내용은 CSS3 레이아웃 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사