6

I have created a flex-box container which has further images and a paragraph inside a div in it. As soon as i enable wrapping the in css using "flex-wrap:wrap;", the text in the paragraph doesn't wrap anymore, causing the boxes to break line and appear in the next one. Attaching the related css code and the body itself.

.itembox {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  flex-grow: 1;
  margin-top: 10px;
  margin-bottom: 10px;
  /*flex-shrink:0;*/
  /*flex: 1 1 0;*/
  /*justify-content: space-between;*/
  /*flex-basis:100px;*/
  /*flex-wrap:wrap;*/
}
<div class="itembox">
  <div class="aritem">
    <p>
      <img src="img/digital media 200p.png" style="height:200px; width:200px;" />
    </p>
    <p class="bold caps">social media management</p>
    <div class="aritemtext">
      <p class="article">
        <!--managing your presence on various social media platforms so your followers always get the latest updates.-->
        manage your presence and content on social media
        <br /><a href="#" class="readmore">→</a>
      </p>
    </div>
  </div>
  <div class="aritem">
    <p>
      <img src="img/prmanage.jpg" style="height:200px; width:200px;" />
    </p>
    <p class="bold caps">pr management</p>
    <div class="aritemtext">
      <p class="article">
        <!--managing your communication strategies for a wonderful customer experience, thereby creating more value for your customers-->
        manage communication strategy for your audience
        <br /><a href="#" class="readmore">→</a>
      </p>
    </div>
  </div>
  <div class="aritem">
    <p>
      <img src="img/creative design 200p.png" style="height:200px; width:200px;" />
    </p>
    <p class="bold caps">Creative Design</p>
    <div class="aritemtext">
      <p class="article">
        <!--need presentations, banners or a fresh new look of you site designed? Great! Send us a not and we take care of the rest-->
        get presenations, banners, or a fresh new look for your website
        <br /><a href="#" class="readmore">→</a>
      </p>
    </div>
  </div>
  <div class="aritem">
    <p>
      <img src="img/media 200p.png" style="height:200px; width:200px;" />
    </p>
    <p class="bold caps">media services</p>
    <div class="aritemtext">
      <p class="article">
        video shoots, editing, and photography and production services
        <!--available. contact today for a consultation-->
        <br /><a href="#" class="readmore">→</a>
      </p>
    </div>
  </div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Manish K Yadav
  • 63
  • 1
  • 6
  • thanks @Matt for suggesting the edit. Do you also have the answer? – Manish K Yadav Oct 02 '18 at 11:53
  • 2
    I'm a bit confused about what you want to achieve. Currently, it breaks onto a new line as expected. If you don't want this to happen, you can set `flex-wrap: nowrap`. Maybe you could clarify what the issue is? – Matt Oct 02 '18 at 12:03
  • 1
    Paragraphs are 100% wide by default....so this does look like default behaviour. – Paulie_D Oct 02 '18 at 12:05
  • an image, a title text, short description text, and the forward arrow(_read more hyperlink_) form one set (_like a box_) I gotta put 4 of such boxes in a row(_which is why i used flexbox_) the problem is, 1. If i don't use "flex-wrap:wrap", the boxes don't wrap down when the page is shrinked. 2. If i use the flex wrap option, these boxes do wrap, but the paragraph text goes straight, thereby causing one of the boxes in the row to wrap down in full page. – Manish K Yadav Oct 02 '18 at 12:14

2 Answers2

3

Because paragraphs are 100% wide by default, like Paulie_D stated, if you set a max-width value (anything less than 100%) in your .aritemtext class, it will fix your issue. Also, if you are using "flex-flow: row wrap", then you don't need "flex-direction: row", as "flex-flow" combines the "flex-direction" and "flex-wrap" settings into one.

N8Brown
  • 91
  • 2
  • 4
  • Thanks @N8Brown, it did help break the rigidity of the paragraph text, but still does not change the behaviour of the flexbox. The problem is that the boxes stay intact in the row by the time i put in "flex-direction: row;". But one box wraps down the moment i put the wrap attribute to it. Don't know what is going on. Is there any way i can show you what is happening? (_i am sorry i am a new user here, will take some time take all tools handy_) – Manish K Yadav Oct 02 '18 at 17:34
  • So here's what I see on my end. Without "flex-wrap", your class .aritem divs will stay on one row and the paragraphs in them will wrap as needed. The moment you set the "flex-wrap" setting, it now allows the paragraphs to extend out on one line (full width) thereby increasing the width of the of the div. This increased width pushes the last div to the next line. It looks like if your screen width is less than around 1490px it will wrap the last/fourth div down to the next line. – N8Brown Oct 02 '18 at 18:14
  • setting a max-width value (anything less than 100%) in the .aritemtext class shrink the text in it. I also tried restricting the width of the individual divs to as low as 20%(_so they could accommodate in a row_), but to no help. Now, _what do you think the solution to this should be, if any at all?_ and _What is this 1490px catch, do i need to give some fixed value to it?_ – Manish K Yadav Oct 02 '18 at 18:20
  • 1490px was simply the approximate sum of all of your div widths added together. If their full widths can't fit in the width of the screen, then they wrap. The only other solution I can give you is to set a fixed width to your .aritem class divs (I did 300px and it worked fine on my end). This will make them all the same size. Again, the flex trigger is going to be dependent upon the width of your screen/viewport. If you're using Chrome as your web browser, hit F12 (Windows) and use the responsive design tool (Ctrl + Shift + M) to see your project at different screen sizes. – N8Brown Oct 02 '18 at 18:34
0

You can also use the paragraph to display: inline or set the width of the the child items.

Using parameterized mixins: https://github.com/mabbashm110/Sprint-Challenge--Responsive-Less/blob/master/less/home-page.less

DevDisrupt
  • 154
  • 5