CSS를 사용하여 FlexBox의 최소 열 너비를 설정하는 방법-CSS 튜토리얼-php.cn

CSS를 사용하여 FlexBox의 최소 열 너비를 설정하는 방법

不言

풀어 주다： 2018-12-05 09:50:36

원래의

3770명이 탐색했습니다.

CSS와 함께 FlexBox를 사용하여 최소 열 너비를 설정하는 방법은 무엇입니까? FlexBox에서 열의 최소 너비를 지정하려면 min-width 속성을 사용해야 합니다. 구체적인 내용을 살펴보겠습니다.

CSS FlexBox에서 열의 최소 너비를 설정하는 데 사용되는 속성은 min-width 속성의 구문입니다. min-width: (너비 크기). 최소 너비를 320px로 설정하는 것입니다.

CSS를 사용하여 FlexBox의 최소 열 너비를 설정하는 방법

먼저 min-width 속성의 구문 형식을 살펴보겠습니다.

min-width: （宽度尺寸）

로그인 후 복사

너비의 크기는 CSS 크기 사양을 사용하여 지정할 수 있습니다.

구체적인 예를 살펴보겠습니다

코드 예:

다음 코드를 작성하세요

CSS 코드:

flex-column-min-width.css

.container {
    display: flex;
}
.frameLeft {
    border: 1px solid #e9006b;    
    background-color:#fddceb;    
    min-width:160px;    
    flex: 1;
}
.frameCenter {
    border: 1px solid #0158c2;    
    background-color: #ccdff6;    
    min-width: 320px;    
    flex: 3;
}
.frameRight {
    border: 1px solid #d44100;    
    background-color: #ffe4af;    
    min-width: 160px;    
    flex: 1;
}

로그인 후 복사

HTML 코드:

flex-column -min-width.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="flex-column-min-width.css" />
</head>
<body>
  <div class="container">
    <div class="frameLeft">左边的内容文字<br />内容内容<br />内容内容</div>
    <div class="frameCenter">中间的内容文字<br />内容内容<br /></div>
    <div class="frameRight">右边的内容文字<br />内容内容<br />内容内容</div>
  </div>
</body>
</html>

로그인 후 복사

표시 결과:

웹 브라우저를 사용하여 위의 HTML 파일을 표시하세요. 아래와 같은 효과가 표시됩니다. 왼쪽 및 오른쪽 열의 너비와 중간 열의 너비는 1:3입니다.

CSS를 사용하여 FlexBox의 최소 열 너비를 설정하는 방법