Website designing has evolved considerably which enables us to create many new and innovative designs if done right. One of the website design trends is having equal heights of box in a row.<\/p>\n
When designing box view HTML, the same height box often requires the attention of web designers.<\/p>\n
Equal height columns with background box have been a need of web designers everywhere while building HTML. If all the inner box have the same background, equal height is irrelevant because you can set that background on a parent element. But if one or more columns need to have their own background, it becomes very important to the visual integrity of the design.<\/p>\n
I’ve created a Lorem Ipsum is simply dummy text of the printing and typesetting industry.<\/p>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\t It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<\/p>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\t Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.<\/p>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div><\/pre>\n First let’s use the The flex property is shorthand for flex grow, flex shrink and flex basis. I have used Here I’ve added some media queries. My layout will start with one item per row until the screen size reaches 768px. Then it will fit two items into each row until the screen size gets to 992px, Then it will fit three items into each row until the screen size gets to 1200px, when it switches to four items per row. <\/p>\n I’ve added Website designing has evolved considerably which enables us to create many new and innovative designs if done right. One of the website design trends is having equal heights of box in a row. When designing box view HTML, the same height box often requires the attention of web designers. Equal height columns with background box … <\/p>\n.flex-row<\/code> container with a items of .flex-column<\/code> elements inside. Each list .items<\/code> contains some content elements such as <img><\/code>, <a><\/code>, <h1><\/code> and <p><\/code>.<\/p>\nWhat is Lorem Ipsum?<\/h2>\r\n\t\t\t
Why do we use it?<\/h2>\r\n\t\t\t
Where does it come from?<\/h2>\r\n\t\t\t
Step 2:<\/span> Create a flexbox container<\/h6>\n
display:flex;<\/code> value to be declared on the containing element .flex-row<\/code>, which as a result makes it’s direct children flex elements .flex-column<\/code>. Flex-wrap means that items will move to new row when the horizontal space is empty. <\/p>\n.flex-row {\r\n display: -ms-flexbox;\r\n display: flex;\r\n -ms-flex-wrap: wrap;\r\n flex-wrap: wrap;\r\n margin-right: -15px;\r\n margin-left: -15px;\r\n}<\/pre>\nStep 3:<\/span> Add flex to column<\/h6>\n
flex: 0 0 100%;<\/code> which means:
\nflex-grow: 0;<\/code>
\nflex-shrink: 0;<\/code>
\nflex-basis: 100%;<\/code>
\nHere, Flex-basis is set to 100%, so the free space is used based on the flex-grow value.<\/p>\n.flex-column {\r\n width: 100%;\r\n padding: 15px;\r\n -ms-flex: 0 0 100%;\r\n flex: 0 0 100%;\r\n max-width: 100%;\r\n}<\/pre>\nStep 4:<\/span> Add media queries for column width<\/h6>\n
@media (min-width: 768px) {\r\n .flex-column {\r\n -ms-flex: 0 0 50%;\r\n flex: 0 0 50%;\r\n max-width: 50%;\r\n }\r\n}\r\n\r\n@media (min-width: 992px) {\r\n .flex-column {\r\n -ms-flex: 0 0 33.333333%;\r\n flex: 0 0 33.333333%;\r\n max-width: 33.333333%;\r\n }\r\n}\r\n\r\n@media (min-width: 1200px) {\r\n .flex-column {\r\n -ms-flex: 0 0 25%;\r\n flex: 0 0 25%;\r\n max-width: 25%;\r\n }\r\n}<\/pre>\nStep 5:<\/span> Set height to items<\/h6>\n
height: 100%;<\/code> to the .items<\/code> so that .items<\/code> element will equal heights as .flex-column<\/code> element.<\/p>\n.items {\r\n background: #ddd;\r\n padding: 15px 20px;\r\n height: 100%;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"