What is the meaning of xs, md, lg in CSS Flexbox?
I am developing an application using React
and wanted to style components, I found https://roylee0704.github.io/react-flexbox-grid/ which talks about the fluid grid system. An example looks like this:
<Row>
<Col xs={12} sm={3} md={2} lg={1} />
<Col xs={6} sm={6} md={8} lg={10} />
<Col xs={6} sm={3} md={2} lg={1} />
</Row>
but I don't know what it is xs
, sm
and lg
is it? Can someone explain please?
source to share
Let's assume our screen is divided into columns 12
.
The part xs
is done when the screen is too small, also small, medium and large, based on their definition of the screen size in CSS.
The example you provided:
<Row>
<Col xs={12} sm={3} md={2} lg={1} />
<Col xs={6} sm={6} md={8} lg={10} />
<Col xs={6} sm={3} md={2} lg={1} />
</Row>
For us, suppose these three columns are named col-1
, col-2
andcol-3
On an additional small screen:
col-1
takes all 12 columns and the other two take 6 each (on a new row)
On small screens
col-1
and col-3
takes 3 and the average col-2
takes 6
Similarly
Medium screens
Large screens
PS The images are screenshots of the link you provided (by resizing the browser for each screen size)
source to share
Responsive Flexbox Grid can be used to make your site responsive. It is derived from a grid followed by Bootstrap .
The grid system divides the screen into 12 columns, and you can specify how much width can be achieved for components on mobile devices, tablets, and desktops. Breakpoints for xs
, sm
, md
, lg
and xl
are 576px, 768px, 992px and 1200px.
You can see the difference by resizing your browser window at https://roylee0704.github.io/react-flexbox-grid/
Same as next media query
// xs --- Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// sm --- Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// md --- Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// lg --- Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// xl --- Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
source to share