Results 1 to 5 of 5

Thread: Flex-Box content alignment and width (on wrap) problems...

  1. #1
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default Flex-Box content alignment and width (on wrap) problems...

    Hi, I have a menu bar at the bottom of a page which I am using flex-box to keep the link buttons within it the same size. I have the following CSS relating to it...

    Container:

    Code:
        .menus{
        position:fixed;
        bottom:10px;
        left:20px;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:flex-end;
        align-items:flex-end;
        align-content:stretch;
        width:calc(100% - 40px);
        height:calc(100% - 250px);
        background:#ff0000;
        }
    (The height of the container is far greater than the required height for the links as it contains other content too, however this has been removed for conciseness, the links should sit along the bottom of the container and leave the rest blank)

    Links:

    Code:
        .navlink{
        cursor:pointer;
        flex-grow:1;
        align-self:flex-end;
        text-align:center;
        margin:auto;
        margin-bottom:0;
        min-width:200px;
        box-sizing:border-box;
        background:#f5f5f5;
        border-bottom:solid 2px rgba(193, 193, 193, 1);
        border-right:solid 3px rgba(193, 193, 193, 1);
        border-left:solid 2px rgba(255, 255, 255, 1);
        border-top:solid 3px rgba(255, 255, 255, 1);
        height:50px;
        transition: all 350ms linear;
        }
    At the moment just as a test run there are six link buttons, when the screen width is greater than 1240px (20px margin either side of container and 6 x 200px for min-width of links) it works perfectly...

    Click image for larger version. 

Name:	working - 1 x 6.JPG 
Views:	172 
Size:	25.5 KB 
ID:	5816

    However when I shrink screen below this size I get two problems which I can't work out how to solve....

    Click image for larger version. 

Name:	broken - extended 6th.JPG 
Views:	168 
Size:	28.0 KB 
ID:	5815

    Firstly, it jumps only the required number of links to a new a line so for example at the first break point links 1 to 5 stay in one line and only link 6 wraps to a new line then extends to fill that row, I would like the jump to split the links evenly so as soon as 1 x 6 doesn't fit on screen it jumps to 2 x 3 so they are all always the same width. Secondly it only keeps the bottom row aligned to the bottom, so when it breaks to two rows the second row is at the bottom (where it should be) but the first row is halfway up the container (whereas it should be directly above the bottom row with no gap).

    Many thanks if anyone is able to help
    Last edited by Beverleyh; 02-09-2016 at 04:18 PM. Reason: resolved

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Looks like you already sorted it in another forum: https://www.reddit.com/r/csshelp/com...alignment_off/
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    I think so.... The answer there doesn't quite do what I want, but I think I can work it out from there. I'm still tinkering with it at the moment, and will close/edit/leave this post depending on how I get on.

  4. #4
    Join Date
    May 2014
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default

    Yup, got it sorted now... but can't see how to mark as resolved :/
    Last edited by Neil1; 02-09-2016 at 03:01 PM.

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I've marked it as resolved on your behalf

    For future reference, you go to your first post in the thread > Edit > Advanced, then select 'Resolved' from the title prefix dropdown
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. IE alignment problems
    By TomK82 in forum Looking for such a script or service
    Replies: 1
    Last Post: 04-11-2012, 11:58 PM
  2. Alignment/Width Issue
    By Hyphen in forum CSS
    Replies: 3
    Last Post: 09-04-2010, 03:18 PM
  3. Flex Level Drop Down Menu Width
    By martino in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-15-2010, 04:08 PM
  4. Replies: 3
    Last Post: 10-08-2009, 08:55 PM
  5. All Levels Navigational Menu Width & Alignment Problems
    By mindretreat in forum Dynamic Drive scripts help
    Replies: 12
    Last Post: 04-21-2009, 07:40 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •