Flex has 4 child how to impose 50% available width to each child

HTML & CSS
1 
<div class="related-articles">
	<article>Some text here</article>	
	<article>Some text here</article>	
	<article>Some text here</article>	
	<article>Some text here</article>	
</div>

.related-articles is a flex box. How to impose 50% width on every article? so that one row has 2 column.

2

Have you tried flex:1 0 50% on article?

The parent will need flex-wrap: wrap of course.

2 Likes
3

I tried this, but i think I missed flex-wrap. Here is the final site.
Is there a way we can increase the gap between the two columns (w/o using margin if possible).

4

Hi there codeispoetry,

here is an example that uses “width:49.25%;”
for a smidgen of breathing space…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

#container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0 0.25% 0.5% ;
    border:1px solid #999;
    background-color: #fff;
    box-shadow: 0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.3 );
 }

#container > div {
    width:49.25%;
    padding: 1em; 
    margin: 0.5% 0 0; 
    border: 1px solid #999;
    background-color: #eef;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 );
 }

@media ( max-width:31em ){
#container {
    display: block;
  }

#container > div {
    width:100%;
  }
 }
</style>

</head>
<body> 

 <div id="container">
  <div>Some text here</div>	
  <div>Some text here</div>	
  <div>Some text here</div>	
  <div>Some text here</div>	
 </div>

</body>
</html>

coothead

2 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.