How to set minimum column width of FlexBox with CSS-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set minimum column width of FlexBox with CSS

不言

Nov 29, 2018 am 11:15 AM

flexbox

How to set the minimum column width using FlexBox with CSS? To specify the minimum width of a column in FlexBox, you need to use the min-width attribute. Let's take a look at the specific content.

The attribute used to set the minimum width of a column in CSS FlexBox is the min-width attribute. The syntax of the min-width attribute is min-width: (width size), for example, min-width: 320px; Just set the minimum width to 320px.

How to set minimum column width of FlexBox with CSS

First let’s take a look at the syntax format of the min-width attribute:

min-width: （宽度尺寸）

The width size can be specified using the CSS size specification.

Let’s look at a specific example

Code example:

Write the following code

CSS code:

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 code:

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>

Display Result:

Use a web browser to display the above HTML file. The effect shown below will be displayed. The width of the left and right columns and the width of the middle column are 1:3.

How to set minimum column width of FlexBox with CSS

Reduce the window width of your web browser. The ratio of the width of the three columns remains unchanged, and the width of each column shrinks. The effect is as follows.

How to set minimum column width of FlexBox with CSS

In addition, reducing the window width will narrow the width of the frame, but the width of the left and right frames will not be less than 160 pixels, only the width of the center frame will become narrower, as shown in the figure below .

How to set minimum column width of FlexBox with CSS

Since the center frame also has a setting that is not narrower than 320 pixels, if the window width becomes 640 pixels (left frame 160px, middle frame 320px, right frame 160px) or smaller, The horizontal scroll bar will be displayed as shown in the figure below.

How to set minimum column width of FlexBox with CSS

The above is the entire content of this article. For more related exciting content, you can move to the CSS Video Tutorial column of the php Chinese website for further information. study! ! !

The above is the detailed content of How to set minimum column width of FlexBox with CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How much specificity do @rules have, like @keyframes and @media?Apr 18, 2025 am 11:34 AM

I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?

Can you nest @media and @support queries?Apr 18, 2025 am 11:32 AM

Yes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.

Quick Gulp Cache BustingApr 18, 2025 am 11:23 AM

You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser

In Search of a Stack That Monitors the Quality and Complexity of CSSApr 18, 2025 am 11:22 AM

Many developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have

Datalist is for suggesting values without enforcing valuesApr 18, 2025 am 11:08 AM

Have you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what is for. There are lots of

Front Conference in ZürichApr 18, 2025 am 11:03 AM

I'm so excited to be heading to Zürich, Switzerland for Front Conference (Love that name and URL!). I've never been to Switzerland before, so I'm excited

Building a Full-Stack Serverless Application with Cloudflare WorkersApr 18, 2025 am 10:58 AM

One of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details

Creating Dynamic Routes in a Nuxt ApplicationApr 18, 2025 am 10:53 AM

In this post, we’ll be using an ecommerce store demo I built and deployed to Netlify to show how we can make dynamic routes for incoming data. It’s a fairly

See all articles