Jump to content
iwato

Suppressed Flexwrap Attribute

Recommended Posts

BACKGROUND:  I am inserting a div tag into an HTML document via Javascript and for some reason an ultra-specified flexwrap attribute is being suppressed.  Other flexbox attributes contained within the same specification appear.  It is baffling.

 

CODE:

section#middle #main #gctutor_div #heading #needhelp_flexbox {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flexwrap: wrap;
}

.needhelp_left {
	width: 48%;
	text-align: right;
}

.needhelp_right {
	width: 48%;
}

THE EXPERIENCE:  You may experience this phenomenon by proceeding to tutor.grammarcaptive.com,  clicking where it says, "Learn to navigate ...", and then narrowing the width of your screen.

QUESTION:  How does one account for the suppression? And, if possible, correct for it.

Roddy

Share this post


Link to post
Share on other sites

The property is "flex-wrap" with a dash between the words.

  • Like 1

Share this post


Link to post
Share on other sites

Thank you, Ingolme.  That was helpful, but it did not solve the problem.  The attribute/property is no longer suppressed, but the resulting condition is identical.  When the screen is narrowed no wrapping takes place.  Rather the image moves in front of the text, as the two <div>s appear to converge.

I had hoped that the when the viewport shrunk the items within the flexbox would realign vertically.  It were as if, the affected div does not understand that the viewport is shrinking. 

Roddy

Share this post


Link to post
Share on other sites

You specifically set them to 48% of the window, so they always fit on one row. If you want them to wrap, you have to give them a width which will eventually not fit in the window and then they will move into columns.

Alternatively, you can remove the width property and just use a media query to change the flex-direction to column on mobile devices.

  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you, Ingolme.

Your observation appears to have been correct.  I changed the code as follows and all is working as it should.

section#middle #main #gctutor_div #heading #needhelp_flexbox {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    flex-wrap: wrap;
}

.needhelp_left {
	text-align: right;
	margin: auto;
}

.needhelp_right {
	margin: auto;
	margin-top: 1.5em;
}

Roddy

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...